javascript - 通过使用 jquery 检查单选按钮启用复选框

Question

如何使用 jquery 通过选中单选按钮来启用所有复选框？ 基本上，如果选中电子邮件，则所有复选框都可以保持禁用状态，如果选中电话，则应启用所有复选框。

$("input:radio[value=Phone]").on("change", function() {
  $("#chekbox").find("input").prop("enabled", !$("input:radio[value=Email]").prop('checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label>Preferred Contact Method: </label>
  <label class="radio-inline ml-5 "><input type="radio" value="Phone" name="pref"> Phone </label>
  <label class="radio-inline"><input type="radio" value="Email" name="pref"> Email </label>
</div>


  <label>If phone is checked can we contact you? </label>
  <div class="checkbox">
    <label class="checkbox-inline  ml-1"><input type="checkbox" name="prefchk[]" value="morning" disabled> Morning</label>
    <label class="checkbox-inline  ml-1"><input type="checkbox" name="prefchk[]" value="afternoon" disabled> Afternoon</label>
    <label class="checkbox-inline  ml-1"><input type="checkbox" name="prefchk[]" value="evening" disabled> Evening</label>
  </div>

Answer 1

您需要使用 .attr()为此，因为 disable 是属性而不是属性

工作片段:-

$("input[name=pref]").on("change", function() {
  $("input[type=checkbox]").attr("disabled", $(this).val()=='Email');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label>Preferred Contact Method: </label>
  <label class="radio-inline ml-5 "><input type="radio" value="Phone" name="pref"> Phone </label>
  <label class="radio-inline"><input type="radio" value="Email" name="pref"> Email </label>


  <label>If phone is checked can we contact you? </label>
  <div class="checkbox">
    <label class="checkbox-inline  ml-1"><input type="checkbox" name="prefchk[]" value="morning" disabled> Morning</label>
    <label class="checkbox-inline  ml-1"><input type="checkbox" name="prefchk[]" value="afternoon" disabled> Afternoon</label>
    <label class="checkbox-inline  ml-1"><input type="checkbox" name="prefchk[]" value="evening" disabled> Evening</label>
  </div>
</div>

注意:- 我添加了代码，例如如果单击电话单选按钮，复选框将启用，如果单击电子邮件单选按钮，则复选框将被禁用.