Как снять все флажки, кроме одного, использующего jQuery?

У меня есть форма, которая имеет несколько групп чекбоксов.

Каждая опция checkbox имеет пользовательский атрибут html 5 под названием itemtype. Когда ввод типа= "checkbox" изменяется, мне нужно оценить флажок, который был только что выбран. Если значение it'S data-itemtype равно 'Skipper', я хочу снять все другие флажки, принадлежащие к той же группе.

Другими словами, предположим, что у меня есть несколько флажков и один из вариантов флажка имеет метку "нет", если пользователь проверяет "нет", ничего не должно быть выбрано, кроме"нет". Я не могу использовать переключатель здесь, так как я хочу, чтобы пользователь мог проверить несколько вариантов, если "нет" Не выбрано.

Вот фрагмент моего кода

ГРУППА ЧЕКБОКСОВ 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>

ГРУППА ЧЕКБОКСОВ 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>
Я создал скрипку, чтобы показать вам, что я сделал вместе со всей формой https://jsfiddle.net/8yf0v3xt/13/

Я пытался сделать что-то подобное, но это не так рабочий 

$(: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();

Что я могу сделать, чтобы открыть все опции, если выбран параметр "нет"?

1 5
javascript html jquery checkbox

1 ответ:

Надеюсь, это сработает для вас 

$(: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();

Обновить

РАБОЧАЯ СКРИПКА

Обновление 2

РАБОЧАЯ СКРИПКА 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();

Обновление 3

РАБОЧАЯ СКРИПКА 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();

Заключение

Несколько моментов, которые я заметил неправильно в вашем коде, заключаются в следующем.

  1. Вы использовали $(this).attr("checked",false);, чтобы снять все флажки. отметьте флажками, что неправильно. $(this) указывает на ТЕКУЩИЙ СИНГЛ Элемент только , не все.

  2. Вы использовали .attr("checked",false) , что также неверно, это должно быть либо .attr("checked","checked"), либо .prop("checked",true).

7