Search code examples
jquery

Edit checkbox the last deactivates the others


I'm editing a form that unfortunately comes out of the plugin like this and I can't edit html. I would like the last checkbox to deselect the other two fields if clicked. In my example it works partially, in the sense that the last one deselects correctly if only one of the others is clicked instead I would like it to be able to click 1 and 2 or No ALL (disabling the others). Thanks for any suggestions

$(document).ready(function () {
    $('#check-video-d').click(function () {
        $('.check-video').prop('checked', false);
    });

    $('.check-video').change(function () {
        var check = ($('.check-video').filter(":checked").length == $('.check-video').length);
        $('#check-video-d').prop("checked", check);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="elementor-field-subgroup  elementor-subgroup-inline">
    <span class="elementor-field-option">
        <input type="checkbox" value="1" id="form-field-field_e1c2b75-0" name="form_fields[field_e1c2b75][]" class="check-video">
        <label for="form-field-field_e1c2b75-0">1</label>
    </span>
    <span class="elementor-field-option">
        <input type="checkbox" value="2" id="form-field-field_e1c2b75-1" name="form_fields[field_e1c2b75][]" class="check-video" data-gtm-form-interact-field-id="4">
        <label for="form-field-field_e1c2b75-1">2</label>
    </span>
    <span class="elementor-field-option">
        <input type="checkbox" value="No ALL" name="form_fields[field_e1c2b75][]" id="check-video-d" data-gtm-form-interact-field-id="5">
        <label for="form-field-field_e1c2b75-2">No ALL</label>
    </span>
</div>


Solution

  • As you want to either select 1 and 2 or 3, then you can update the code to add the check that whether any of the 1 or 2 is selected mark the 3 as unchecked.

    $(document).ready(function () {
        $('#check-video-d').click(function () {
            $('.check-video').prop('checked', false);
        });
    
        $('.check-video').change(function () {
          if(this.checked) $('#check-video-d').prop('checked', false)
        });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div class="elementor-field-subgroup  elementor-subgroup-inline">
        <span class="elementor-field-option">
            <input type="checkbox" value="1" id="form-field-field_e1c2b75-0" name="form_fields[field_e1c2b75][]" class="check-video">
            <label for="form-field-field_e1c2b75-0">1</label>
        </span>
        <span class="elementor-field-option">
            <input type="checkbox" value="2" id="form-field-field_e1c2b75-1" name="form_fields[field_e1c2b75][]" class="check-video" data-gtm-form-interact-field-id="4">
            <label for="form-field-field_e1c2b75-1">2</label>
        </span>
        <span class="elementor-field-option">
            <input type="checkbox" value="No ALL" name="form_fields[field_e1c2b75][]" id="check-video-d" data-gtm-form-interact-field-id="5">
            <label for="form-field-field_e1c2b75-2">No ALL</label>
        </span>
    </div>