根据“数据”属性启用或禁用复选框

Enable or Disable checkbox based on Data attribute

本文关键字：复选框 启用 属性 数据 根据      更新时间：2023-09-26

我有一组具有data-groupid和data-multichoice属性的复选框。

第1组：data-groupid= "1" data=multichoice="0"（10盒）

第2组：data-groupid= "2" data=multichoice="0"（10盒）

如何一次禁用一个组中的所有框？

//function will catch any click on any checkbox with class=lvl
$('.lvl').click(function () {
   //check if box was checked
   if ($(this).is(":checked")) {
      //check if data-attribute is NOT a multi-choice
     if (!($(this).data("multichoice"))) {
        //disable all checkboxes that have the same group-id
        $(this).data("groupid") ... HELP HERE
     }
   }    
 });

由于您希望只允许从一个组中选择一个项目，单选按钮将是更好的选择。

但如果您仍然想使用复选框，那么您可以使用属性选择器（如）进行筛选

$('.lvl').click(function() {
  //check if box was checked
  if (this.checked) {
    //check if data-attribute is NOT a multi-choice
    if (!$(this).data("multichoice")) {
      $('.lvl[data-groupid="' + $(this).data('groupid') + '"]').not(this).prop('checked', false);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="0" />
<br />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />

var group1 = '1'
$('body').find("[data-groupid='" + group1 + "']").prop('checked',true);

试试这个

演示

var group1 = '1'
$('body').find("[data-groupid='" + group1 + "']").prop('checked',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" data-groupid="1">I have a bike
<br>
<input type="checkbox" name="vehicle" data-groupid="2" >I have a car
<br>
<input type="checkbox" name="vehicle" data-groupid="1">I have a bike
<br>
<input type="checkbox" name="vehicle" data-groupid="2" >I have a car
<br>
<input type="checkbox" name="vehicle" data-groupid="1">I have a bike
<br>
<input type="checkbox" name="vehicle" data-groupid="2" >I have a car
<br>

相关文章：