基于Data属性启用或禁用复选框 [英] Enable or Disable checkbox based on Data attribute

问题描述

我有一组复选框，其中包含 data-groupid 和 data-multichoice 属性。

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

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

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

  // function will will点击（函数（）{
 
 //检查框是否被选中）
 if（$（$。$ l $） （this）.is（：checked））{
 
 //检查数据属性是否为多选
 if（！（$（this）.data（ multichoice）））{
 
 //禁用所有具有相同组ID的复选框
 $（this）.data（groupid）... HELP HERE 
 
} 
} 
}）; 
  

解决方案

既然您想允许从中选择1项一个组，单选按钮将是一个更好的选择。

但是如果你仍然想使用复选框，那么你可以使用属性选择器进行过滤，如

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< input class =lvltype =checkboxdata-groupid =1data-multichoice =0/>< in put class =lvltype =checkboxdata-groupid =1data-multichoice =0/>< input class =lvltype =checkboxdata-groupid =1 < br />< input class =lvltype =checkboxdata-groupid =2data-multichoice =0/>< input class = lvltype =checkboxdata-groupid =2data-multichoice =0/>< input class =lvltype =checkboxdata-groupid =2data-multichoice =0 />< input class =lvltype =checkboxdata-groupid =2data-multichoice =0/>  

I have a set of checkboxes that have a data-groupid and data-multichoice attributes.

group 1 : data-groupid= "1" data=multichoice="0" (10 boxes)

group 2 : data-groupid= "2" data=multichoice="0" (10 boxes)

How to I disable all boxes on one group at once?

//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

     }
   }    
 });

解决方案

Since you want to allow to select only 1 item from a group, radio buttons will be a better choice.

But if you still want to use checkbox, then you can filter using attribute selector like

$('.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" />

这篇关于基于Data属性启用或禁用复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！