Jquery dynamic checkboxes

Question

I have the following arrangement:

checkbox_1
checkbox_2

button_1
button_2

Right now I wrote a jquery that when checkbox_1 is checked button_1 becomes active:

$('#checkbox_1').change(function() {
  if (this.checked) {
    $('#btn_1').removeClass('disabled');
  } else {
    $('#btn_1').addClass('disabled');
  }
});

This is a short example. I truly have 7 of these combinations. Is there a way to write the jQuery commands in a way that I write this once instead of 7 times. Each checkbox should activate its individual boxes without affecting each other.

Yes, but how you do so would depend on how they are presented in the DOM. — user400654
– user400654, Commented Mar 21, 2018 at 20:50

GreyRoofPigeon · Accepted Answer · 2018-03-21 20:56:45Z

Start off by giving all your checkboxes the same class, so you can bind an event to them.

Also give the checkbox a data-* attribute, in this case data-button, which maches the id of the corresponding button.

By using that data attribute, you can target the button. You can toggle the class, with a condition. So if it is checked, the second argument (the condition) will be true, and the button will have the class.

$('.myCheckbox').on('change', function() {
  $("#"+$(this).data('button') ).toggleClass( 'disabled', $(this).is(':checked') );
});

.disabled { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="myCheckbox" data-button="button1" /> Checkbox 1
<input type="checkbox" class="myCheckbox" data-button="button2" /> Checkbox 2
<input type="checkbox" class="myCheckbox" data-button="button3" /> Checkbox 3
<br />
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>

Pierre-Adrien Maison · Accepted Answer · 2018-03-21 20:59:44Z

You can use the data-* property tu give to your checkboxes the id of the corresponding button and manage to get this information in your JavaScript.

I did an example with an adaptation of your code :

$('.checkBoxes').change(function() {
  var currentBtnSelector = $(this).data("btn");
  if (this.checked) {
    $('#' + currentBtnSelector).addClass('red');
  } else {
    $('#' + currentBtnSelector).removeClass('red');
  }
});

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="checkBox1" class="checkBoxes" type="checkbox" data-btn="btn1">
  <label for="checkBox1">Checkbox1</label>
  <button id="btn1">button1</button>
</div>

<div>
  <input id="checkBox2" class="checkBoxes" type="checkbox" data-btn="btn2">
  <label for="checkBox2">Checkbox2</label>
  <button id="btn2">button2</button>
</div>

<div>
  <input id="checkBox3" class="checkBoxes" type="checkbox" data-btn="btn3">
  <label for="checkBox3">Checkbox3</label>
  <button id="btn3">button3</button>
</div>

Ryne · Accepted Answer · 2018-03-21 21:37:50Z

With your existing code, you can simply add the following:

$("input[type='checkbox']").change(function() {
  $("button:eq(" + $(this).index() + ")").toggleClass("active");
});

We're listening to all <input type="checkbox"/> element changes.
Once clicked, we'll get the index and use that to target the appropiate button element.

The upside to this is that no further modifications are needed, but the downside is that we're targeting checkbox inputs and buttons globally on the DOM. Should you need to narrow down the scope, I would recommend either following the data-* advice posted already, or utilize surrounding containers such as below.

<div class="checkbox_group_id">
  <input type="checkbox" id="checkbox_0"/>
  <input type="checkbox" id="checkbox_1"/>
  <input type="checkbox" id="checkbox_2"/>
</div>

<div class="button_group_id">
  <button id="button_0">Button #0</button>
  <button id="button_1">Button #1</button>
  <button id="button_2">Button #2</button>
 </div>

From there, you can simply prefix the targets with the container class, restricting the scope to the specified list.

Collectives™ on Stack Overflow

Jquery dynamic checkboxes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related