jQuery - отключить флажки на основе первого щелкнутого атрибута данных проверки

Question

У меня есть список флажков. Мне нужно отключить все другие флажки с другой группой данных и оставить флажки с включенной той же группой данных. Когда пользователь отключает все флажки, все флажки становятся доступными снова. Вот отрезок моего HTML. Идентификатор группы может быть любым числом и генерируется динамически.

<input type="checkbox" value="1" name="mergeTicked[]" class="pickSheetCheck" data-groupid="1"> 
<input type="checkbox" value="2" name="mergeTicked[]" class="pickSheetCheck" data-groupid="2"> 
<input type="checkbox" value="3" name="mergeTicked[]" class="pickSheetCheck" data-groupid="1"> 
<input type="checkbox" value="4" name="mergeTicked[]" class="pickSheetCheck" data-groupid="1"> 
<input type="checkbox" value="5" name="mergeTicked[]" class="pickSheetCheck" data-groupid="2"> 
<input type="checkbox" value="6" name="mergeTicked[]" class="pickSheetCheck" data-groupid="1"> 
<input type="checkbox" value="7" name="mergeTicked[]" class="pickSheetCheck" data-groupid="4"> 
<input type="checkbox" value="8" name="mergeTicked[]" class="pickSheetCheck" data-groupid="3"> 
<input type="checkbox" value="9" name="mergeTicked[]" class="pickSheetCheck" data-groupid="3"> 
<input type="checkbox" value="10" name="mergeTicked[]" class="pickSheetCheck" data-groupid="6"> 
<input type="checkbox" value="11" name="mergeTicked[]" class="pickSheetCheck" data-groupid="6"> 
<input type="checkbox" value="12" name="mergeTicked[]" class="pickSheetCheck" data-groupid="6"> 
<input type="checkbox" value="13" name="mergeTicked[]" class="pickSheetCheck" data-groupid="1"> 
<input type="checkbox" value="14" name="mergeTicked[]" class="pickSheetCheck" data-groupid="1"> 
<input type="checkbox" value="15" name="mergeTicked[]" class="pickSheetCheck" data-groupid="3"> 

И вот как далеко у меня есть с jQuery. Я знаю это ошибки, но я почти там, я думаю. Мне также нужно включить все флажки, когда все они не установлены.

$(document).ready(function(){ 
var $inputs = $(".pickSheetCheck"); 
function checkInput(thisObj){ 
var datagrp = thisObj.attr("data-groupid"); 
$(input:not[data-groupid=datagrp]).attr("disabled", true); 


alert(datagrp); 

} 


$inputs.change(function() { 
    checkInput($(this)); 
}); 
}); 

Кажется довольно простым, что я пытаюсь сделать, но я был на этом какое-то время!

EDIT:

Я получил это работает, однако я мог сделать с некоторой помощью «перезагрузки», когда никакие флажки не выбраны

$(document).ready(function(){ 

var $inputs = $(".pickSheetCheck"); 
function checkInput(thisObj){ 
var datagrp = thisObj.attr("data-groupid"); 

$(".pickSheetCheck").not('[data-groupid="'+datagrp+'"]').attr("disabled", true); 
} 
$inputs.change(function() { 
    checkInput($(this)); 
}); 

}); 

Answer 1

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

if ($('.pickSheetCheck:checkbox:checked').length == 0) { 
    $inputs.attr('disabled', false); 
} else { 
    $(".pickSheetCheck").not('[data-groupid="'+datagrp+'"]').attr("disabled", true); 
} 

Example.

Answer 2

Вы можете подключить некоторый код к change событие всех флажков.

$('input[type="checkbox"]').change(function(){ 

    var this_dataid = $(this).attr('data-groupid'); 
    var this_checked = $(this).is(':checked'); 

    $('input[type="checkbox"]').each(function(){ 

    if ($(this).attr('data-groupid') == this_dataid) { 

     $(this).prop('checked', this_checked); 

    }else{ 

     $(this).prop('checked', false); 

    } 

    }); 

}); 

здесь a working example.

Вы можете использовать JQuery, чтобы проверить состояние проверки и значение элемента, кликнули на заказ data-groupid. Для использования функции jQuery each для прокрутки всех остальных элементов input и соответственно установить статус проверки, используя prop.

https://api.jquery.com/