javascript - 为什么 jQuery 设置 jQuery 禁用属性仅适用于第一个单选输入？

Question

我有四个输入，我想使用 jQuery 禁用其中两个并取消选中。

第一个也按我的预期工作，但是第二个设置了选中的属性，但似乎忽略了禁用的属性。

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 代码:

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

Answer 1

更新:

在你的 jsFiddle 中，你没有包含 jQuery 库。此处使用 jQuery 进行了更新: https://jsfiddle.net/ov5uow38/2/ 。

它适用于第一个，因为 $ 被视为 Console Functions .

<小时/>

它对我来说效果很好:

$('.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>

为了获得最佳结果，建议使用 $(document).ready() 函数。无论如何也不知道为什么它会起作用。

$(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>