How to uncheck all checkboxes except the one using jQuery?

Question

I have a form that has multiple checkbox groups.

Each checkbox option has a custom html 5 attribute called itemtype. When the input of type="checkbox" changes, I need to evaluate the checkbox that was just selected. If the value of it's data-itemtype is equal to 'Skipper', I want to uncheck all other checkboxes that belong to the same group.

In other words, assume that I have multiple checkboxes and one of the checkbox options has a label called "None", if the user checks "None", Nothing should be selected but "None". I can't use a radio button here as I want the user to be able to check multiple options if "None" is not selected.

Here is a break down of my code

CHECKBOX GROUP 1

<input name="control_307[0][307:1003]" id="item_307_1003_0" value="307:1003" data-itemtype="Answer" type="checkbox"> Zulauf Ltd<br>
<input name="control_307[0][307:361]" id="item_307_361_0" value="307:361" data-itemtype="Answer" type="checkbox"> Ziemann, McLaughlin and Kohler
<input name="control_307[0][308:1013]" id="item_307_1013_0" value="308:1013" data-itemtype="Skipper" type="checkbox"> None<br>

CHECKBOX GROUP 2

<input name="control_1000[0][1000:999]" id="item_1000_999_0" value="307:1003" data-itemtype="Answer" type="checkbox"> First Options<br>
<input name="control_1000[0][1000:666]" id="item_1000_666_0" value="1000:666" data-itemtype="Answer" type="checkbox"> Some other option
<input name="control_1000[0][1000"123]" id="item_1000_123_0" value="308:1013" data-itemtype="Skipper" type="checkbox"> None<br>

I have create a fiddle to show you what I have done along with the entire form https://jsfiddle.net/8yf0v3xt/13/

I tried to do something like this but is is not working

$(:checkbox).change(function(){
        var skipper = $("input:checkbox[data-itemtype='Skipper']");

        if( skipper.is(":checked")){

            $(this).attr('checked', false); //uncheck all the boxes for the current group

            skipper.attr('checked', true); //re-check the box that caused everything to uncheck

        }
}).change();

What can I do to unckecl all the option if "None" is selected?

Answer 1

Hope this would work for you

$(:checkbox).change(function(){
        var skipper = $("input:checkbox[data-itemtype='Skipper']");

    if( skipper.is(":checked")){

        //$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group

        //skipper.attr('checked', true); //re-check the box that caused everything to uncheck

        $(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT

    }
}).change();

UPDATE

WORKING FIDDLE

UPDATE 2

WORKING FIDDLE 2

 $(:checkbox).change(function(){
    var skipper = $("input:checkbox[data-itemtype='Skipper']");

if( skipper.is(":checked")){

    //$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group

    //skipper.attr('checked', true); //re-check the box that caused everything to uncheck

    //$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT
    //THIS IS IMPORTANT
    $(this).closest(".survey-control-fieldset").find(":checkbox").not(skipper).prop("checked",false);

}
}).change();

UPDATE 3

WORKING FIDDLE 3

$(:checkbox).change(function(){
        var skipper = $("input:checkbox[data-itemtype='Skipper']");

    if( skipper.is(":checked")){

        //$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group

        //skipper.attr('checked', true); //re-check the box that caused everything to uncheck

        //$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT
        //THIS IS IMPORTANT
        $(this).closest(".survey-control-fieldset").find(":checkbox").not(skipper).prop("checked",false);

    }
    else
        {
            $(this).closest(".survey-control-fieldset").find(":checkbox[data-itemtype='Skipper']").prop("checked",false);
        }
    }).change();

CONCLUSION

Few points I noticed wrong in your code are as follows.

1. You were using $(this).attr("checked",false); to uncheck all checkboxes which is wrong. $(this) points to CURRENT SINGLE ELEMENT only, not all.

2. You were using .attr("checked",false) which is also incorrect, it should be either .attr("checked","checked") or .prop("checked",true).