Disable one group of select elements with checkbox using javascript / jquery

Question

I have a one or more groups of select elements. I need to disable one at a time but both are being disabled. I am using a checkbox to activate the disable action. I am using javascript / jquery.

$(document).ready(function(){
  $('#hour-check').change(function() {
    $('select').prop('disabled', this.checked);
  });
});

JSFiddle LINK

Answer 1

You're using the same id for each check box. These should be unique, or preferably, use a class.

You should also wrap the tables in a containing class to make traversing the DOM easier.

<div class="table-container">
    <p>
        <input type='checkbox' class="hour-check"> 24hr
    </p>
...

Once you've done this you can use the following to disable the appropriate selects:

$('.hour-check').change(function() {
    $(this).parents('.table-container').find('select').prop('disabled', this.checked)
});

See https://jsfiddle.net/d58euhas/