I have several checkboxes, and you want to make a rule for 2 of them, so if I select 1, the other cannot be selected

Question

​<form> <label for="1">Text 1</label> <input type="checkbox" name="1" value="something1" id="1"><br> <label for="2">Text 2</label> <input type="checkbox" name="2" value="something2" id="2"><br> <label for="3">Text 3</label> <input type="checkbox" name="3" value="something3" id="3"><br> <label for="4">Text 4</label> <input type="checkbox" name="4" value="something4" id="4"> </form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

These are flags, I tried to search all over the Internet and found nothing.

I want to allow the user to check the identifiers 3 and 4 BUT> if he checks 1, then 2 is not available for verification or if he checks 2, then 1 is not available for verification. And to the inaccessible add the class .. named .. grade-out{ color: #DDD;}

Hope you understand the problem. Thanks at Advance !!

Answer 1

I would add the data-groupid to your checkboxes to determine which group they belong to. And then add a click handler to the cells belonging to the group, which will be disabled in all other flags in the same group when they are checked, and enable them when unchecked.

If your markup is consistent, and labels are always the forerunners of the corresponding flags, you can easily customize them using the prev() method.

 $('input:checkbox[data-group]').click(function() { var groupid = $(this).data('group'); var checked = $(this).is(':checked'); if(checked) { $('input:checkbox[data-group=' + groupid + ']').not($(this)) .attr('disabled', 'disabled') .prev().addClass('grade-out'); } else { $('input:checkbox[data-group=' + groupid + ']') .removeAttr('disabled') .prev().removeClass('grade-out'); } }); 

Demo

Answer 2

You can use the radio format inputs. Anyway, if you need to use checkboxes, you can use some javascript (e.g. with jQuery)

 $('#1,#2').click(function(){ var $this = $(this); var theOtherId = $this.attr('id') == 1 ? 2 : 1; var theOtherOne = $('#'+theOtherId); if( $this.is(':checked') ) theOtherOne.attr('checked',false); }); 

Is this what you are looking for?

Re-processed example: demo fiddle

 $('#1,#2').click(function(){ var $this = $(this); var theOtherId = $this.attr('id') == 1 ? 2 : 1; var theOtherOne = $('#'+theOtherId); if( $this.is(':checked') ) theOtherOne.attr('disabled',true); else theOtherOne.attr('disabled',false); }); 

Answer 3

I would assign a data-disable attribute to disable some elements and check onchange .

Here's how I do it:

 <form> <label for="1">Text 1</label> <input type="checkbox" name="1" value="something1" id="1" data-disable="2,3"><br> <label for="2">Text 2</label> <input type="checkbox" name="2" value="something2" id="2" data-disable="1"><br> <label for="3">Text 3</label> <input type="checkbox" name="3" value="something3" id="3"><br> <label for="4">Text 4</label> <input type="checkbox" name="4" value="something4" id="4"> </form>​​​ 

and script:

 $('input:checkbox​​​​​​​​​​​​​​​​​​')​.on('change', function(){ var toUncheck = $(this).attr('data-disable'); var self = $(this); $.each(toUncheck.split(','), function(el, val){ if(self.attr('checked') == 'checked'){ $('#'+val).attr('disabled', 'disabled'); } else { $('#'+val).removeAttr('disabled'); } }); });​ 

JSFiddle Demo

Answer 4

• Use $("#element_id").hide(); to disable the checkbox

• Use $("#element_id").attr("checked", true); to check if this box is checked

• Use $("#element_id").addclass(); to add a class to an element in order to briefly find the jQuery selector and you will find solutions

Vist for more information http://api.jquery.com/category/selectors/ Hope to help take care

Answer 5

Despite the fact that the more complex and flexible solutions are offered above, if you want it to have a strong but understandable example of use. Using id makes the task easier.

http://jsfiddle.net/erdincgc/uMhbs/1/

HTML (class and id added);

 <form> <label for="1">Text 1</label> <input class="checks" type="checkbox" id="option1" name="option1" value="something1" id="1"><br> <label for="2">Text 2</label> <input class="checks" type="checkbox" id="option2" name="option2" value="something2" id="2"><br> <label for="3">Text 3</label> <input class="checks" type="checkbox" id="option3" name="option3" value="something3" id="3"><br> <label for="4">Text 4</label> <input class="checks" type="checkbox" id="option4" name="option4" value="something4" id="4"> </form> 

And js

 $('.checks').click(function(){ op1 = $('#option1') ; op2 = $('#option2') ; this_id = $(this).attr("id") ; this_state = $(this).attr("checked"); if(this_id =="option1"){ if( this_state == "checked" ){ op2.attr("disabled",true); } else { op2.attr("disabled",false); } op2.prev().toggleClass('disabled'); } if(this_id=="option2"){ if( this_state=="checked" ) op1.attr("disabled",true); else { op1.attr("disabled",false); } op1.prev().toggleClass('disabled'); } });