Enable or Disable checkbox based on Data attribute

Question

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

     }
   }    
 });

Why don't you use radio box instead

Arun P Johny
– Arun P Johny

2015-10-31 08:54:06 +00:00
Commented Oct 31, 2015 at 8:54 — Arun P Johny
– Arun P Johny, Commented Oct 31, 2015 at 8:54

Arun P Johny · Accepted Answer · 2015-10-31 08:55:37Z

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

guradio · Accepted Answer · 2017-07-31 18:23:25Z

3

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

try this

demo

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>

edited Jul 31, 2017 at 18:23

answered Oct 31, 2015 at 8:55

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

Enable or Disable checkbox based on Data attribute

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related