1

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>

1 Answer 1

1

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.