Question

我有一个复选框列表。我需要禁用具有不同data-groupid的所有其他复选框，并使复选框保持启用相同的data-groupid。当用户取消选中所有复选框时，所有复选框将再次可用。这是我的HTML片段。组ID可以是任何数字，并且是动态生成的。

<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));
});
});

我想要做的似乎很简单，但我已经有一段时间了！

修改

我已经完成了工作，但是当没有选中复选框时我可以帮助'重置'

$(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

您可以将一些代码连接到所有复选框的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/

Answer 2

要重置复选框，您只需计算复选框，如果没有，则启用全部。

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

Example

jQuery - 根据首先单击的已检查数据属性禁用复选框

2 个答案: