时间戳

首页 > 解决方案 > 通过使用 jquery 选中单选按钮来启用复选框

javascript - 通过使用 jquery 选中单选按钮来启用复选框

问题描述

如何通过使用 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>

标签： javascriptjquery

解决方案

您需要为此使用.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>

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

推荐阅读