N. Base N. Base - 5 months ago 11
jQuery Question

Why does jQuery setting jQuery disabled property only work on first radio input?

I have four inputs and I would like to make two of them disabled and unchecked using jQuery.

The first works as I would expect it too, however the second sets the checked property but seems to ignore the disabled property.

jsfiddle: https://jsfiddle.net/ov5uow38/

Html:

<div class="selectedTime">
<label class="radio"><input type="radio" value="08:30 - 12:00" name="f_fitting_time" class="time_1" checked="checked" disabled="">08:30 - 12:00</label>
<div class="nonSat">
<label class="radio">
<input type="radio" value="10:00 - 13:30" name="f_fitting_time" class="time_2">
10:00 - 13:30
</label>
<label class="radio">
<input type="radio" value="11:30 - 15:00" name="f_fitting_time" class="time_3">
11:30 - 15:00
</label>
<label class="radio">
<input type="radio" value="13:30 - 17:30" name="f_fitting_time" class="time_4">
13:30 - 17:30
</label>
</div>
</div>


Jquery code:

$('.time_1').prop('disabled', true);
$('.time_1').prop('checked',false);
$('.time_2').prop('disabled', true);
$('.time_2').prop('checked',false);

Answer

Update:

In your jsFiddle, you aren't including jQuery library. Updated with jQuery here: https://jsfiddle.net/ov5uow38/2/.

It works for the first one because, $ is considered as Console Functions.


It works fine for me:

$('.time_1').prop('disabled', true);
$('.time_1').prop('checked',false);
$('.time_2').prop('disabled', true);
$('.time_2').prop('checked',false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectedTime">
  <label class="radio"><input type="radio" value="08:30 - 12:00" name="f_fitting_time" class="time_1" checked="checked" disabled="">08:30 - 12:00</label>
  <div class="nonSat">
    <label class="radio">
      <input type="radio" value="10:00 - 13:30" name="f_fitting_time" class="time_2">
      10:00 - 13:30
    </label>
    <label class="radio">
      <input type="radio" value="11:30 - 15:00" name="f_fitting_time" class="time_3">
      11:30 - 15:00
    </label>
    <label class="radio">
      <input type="radio" value="13:30 - 17:30" name="f_fitting_time" class="time_4">
      13:30 - 17:30
    </label>
  </div>
</div>

It's advised, for best results, use $(document).ready() function. Not sure why it works anyway.

$(function () {
  $('.time_1').prop('disabled', true);
  $('.time_1').prop('checked',false);
  $('.time_2').prop('disabled', true);
  $('.time_2').prop('checked',false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectedTime">
  <label class="radio"><input type="radio" value="08:30 - 12:00" name="f_fitting_time" class="time_1" checked="checked" disabled="">08:30 - 12:00</label>
  <div class="nonSat">
    <label class="radio">
      <input type="radio" value="10:00 - 13:30" name="f_fitting_time" class="time_2">
      10:00 - 13:30
    </label>
    <label class="radio">
      <input type="radio" value="11:30 - 15:00" name="f_fitting_time" class="time_3">
      11:30 - 15:00
    </label>
    <label class="radio">
      <input type="radio" value="13:30 - 17:30" name="f_fitting_time" class="time_4">
      13:30 - 17:30
    </label>
  </div>
</div>