jQuery

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

我想做的事情看起来很简单，但我已经做了一段时间了！

编辑：

我已经开始工作了，但是如果没有选中复选框，我可以借助一些帮助'resetting'

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

要重置复选框，您可以只计算选中的复选框，如果有 none，则启用所有复选框。

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

Example.

jQuery - 根据第一次点击选中的数据属性禁用复选框

jQuery - disable checkboxes based on firstly clicked checked data attribute

html

custom-data-attribute