Question

I am trying to modify an form using JavaScript to populate the options for this form. I am almost done with but I hit a milestone that I cannot overcome. I am wondering if someone can help. The sample is available form here: http://jsfiddle.net/vladc77/bq5U6/3/

I can assign closed days successfully (Saturday & Sunday), but I cannot change the status (disabling/enabling) of the all working days by checking/unchecking check boxes in the form. Please let me know what can be done without changing the way I assign styles to the check boxes in this line:

 $(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');

Thank you in advance.

Answer 1

it’s because you are trying to get siblings of the checkbox.. which it’s only sibling is a span element. The select elements are siblings of the parent element.

$('input[type=checkbox]').change(function() {   
       $(this).parent().siblings('select').prop('disabled', this.checked);
});

http://jsfiddle.net/vladc77/bq5U6/3/

You should also be using .prop() to set disabled attribute. for jQuery 1.6+

From jQuery docs

The .prop() method should be used to set disabled and checked instead of the .attr() method.

Using prop to set the disabled property you can just set it to true or false

$(element).prop('disabled',true);  // disabled
$(element).prop('disabled',false); // not disabled