Selective checkbox activation

Question

Hello everybody.

Condition.

There is a first block, it has three checkboxes:

<input id="enableOne" type="checkbox" />1 разряд<br /> <input id="enableTwo" type="checkbox" />2 разряд<br /> <input id="enableNo" type="checkbox" />Нет разряда<br />

There is a second block, there are several disabled checkboxes in it:

 <input class="check" id="1" type="checkbox" />1<br /> <input class="check" id="2" type="checkbox" />2<br /> <input class="check" id="3" type="checkbox" />3<br /> <input class="check" id="4" type="checkbox" />4<br /> <input class="check" id="5" type="checkbox" />5<br />

Task.

It is necessary that when selecting one of the checkboxes in the first block, the checkboxes tied to it in the second block are activated (the option of ticking it on). For example, when selecting “1 digit” 1-5 checkboxes are activated, “2 digit” - 1,2 and 3 checkboxes, etc. Those. A person, having chosen his rank, can mark only checkboxes tied to this rank. Therefore, it is necessary to bind certain checkboxes in the second block by "id" to each checkbox from the first block.

If a person removes a tick in the first block, then the selected checkboxes in the second block should be cleared and deactivated.

On the Internet, I found a script that allows ticking one checkbox to include others. Code below:

 <input id="enableAll" type="checkbox" />000 <input class="check" type="checkbox" />1 <input class="check" type="checkbox" />2 <input class="check" type="checkbox" />3 $(function(){ $("input.check").attr("disabled","disabled"); $("input#enableAll").click( function(){ if($(this)[0].checked==false) $("input.check").attr("disabled","disabled") else $("input.check").removeAttr("disabled") } ) } )

How can I convert it to my task? For JS I do not understand. Thank you in advance for your help.

first you need to describe in any way, which dependent checkboxes should be affixed.
You can unify the decision, or if the set of checkboxes is strictly limited, then write in the forehead.

Accepted Answer · 2016-12-05T10:28:42

The solution is presented here: https://jsfiddle.net/58sckfp6/

 <input class="control" id="enableOne" data-type="one" type="checkbox" />1 разряд<br /> <input class="control" id="enableTwo" data-type="two" type="checkbox" />2 разряд<br /> <input class="control" id="enableNo" data-type="three" type="checkbox" />Нет разряда<br /> <hr> <input class="check one" id="1" type="checkbox" />1<br /> <input class="check one two" id="2" type="checkbox" />2<br /> <input class="check two three" id="3" type="checkbox" />3<br /> <input class="check three" id="4" type="checkbox" />4<br /> <input class="check one two three" id="5" type="checkbox" />5<br />

 $('.control').on('change',function(){ if($(this).prop('checked')){ $('.check.'+$(this).attr('data-type')).prop('checked',true); } })

Now in detail: in the first (governing) checkboxes, we add an attribute by which we will identify checkboxes from the second group (managed). Checkboxes with a class corresponding to the data-type attribute of the checkbox that was clicked will be marked.

UPD: on the changes in the question. To deactivate the checkbox, just add the attribute disabled to it. In the handler, we have a check to see if the control checkbox was "checked". To disable and deactivate managed checkboxes, add an else block to this condition:

 $('.control').on('change',function(){ if($(this).prop('checked')){ $('.check.'+$(this).attr('data-type')).removeAttr('disabled'); }else{ $('.check.'+$(this).attr('data-type')) .prop('checked',false) .attr('disabled','disabled'); } })

Updated feed: https://jsfiddle.net/58sckfp6/3/

I, probably, badly explained the task. The text of the question corrected. - alegraft
@alegraft, and what has changed? and what these solutions do not fit? - Grundy

Answer 2 · 2016-12-05T10:20:10

You can bind the id first checkbox group to the second by adding classes (by id name) to the checkbox second group:

 $(".checktype").change(function() { var ccc = $(this).attr('id'); $("." + ccc).prop("disabled", !$(this).prop("checked")); !$(this).prop("checked") ? $("." + ccc).prop("checked", false) : '' }) $(".check").prop("disabled", true);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left"> <input id="enableOne" class="checktype" type="checkbox" />1 разряд <br /> <input id="enableTwo" class="checktype" type="checkbox" />2 разряд <br /> <input id="enableNo" class="checktype" type="checkbox" />Нет разряда <br /> </div> <div> <input class="check enableOne" id="1" type="checkbox" />1 <br /> <input class="check enableTwo enableOne" id="2" type="checkbox" />2 <br /> <input class="check enableOne" id="3" type="checkbox" />3 <br /> <input class="check enableTwo enableOne" id="4" type="checkbox" />4 <br /> <input class="check enableNo enableOne" id="5" type="checkbox" />5 <br /> </div>

for the correctness of the task, add .enableOne to all checkboxes in the second list.
@ C.Raf.T duck so that the vehicle understands that, in principle, you can add several classes :)

Selective checkbox activation

2 answers 2

More articles: