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

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

Answer 2

$("input[name=pref]").on("change", function() {
  if(this.value === "Phone"){
      $("input[type=checkbox]").removeAttr("disabled");

  } else if (this.value === "Email") {
     $("input[type=checkbox]").attr("disabled", true);
    
  }
})

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

您可以使用此脚本。

Answer 3

检查

$("input:radio[name=pref]").on("change", function() {
  var IsPhone = $('input:radio[value=Phone]').is(':checked') ? true : false;
  $('.checkbox').find('input[type=checkbox]').prop('disabled', !IsPhone);

});

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

Answer 4

$('.radio input[type="radio"]').on('input',function(){

let inputs=$('.radio input[type="checkbox"]');
$(this).val() == 'Phone' ? inputs.attr('disabled',true) : inputs.removeAttr('disabled');


});

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

Answer 5

您可以使用以下逻辑，

$(document).ready(function() {

  $("input:radio[value=Phone]").on("change", function() {
    $("input[type=checkbox]").removeAttr("disabled");
  });

  $("input:radio[value=Email]").on("change", function() {
    $("input[type=checkbox]").attr('disabled', 'disabled');
  });
});

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

Answer 6

最短的工作代码。请注意，这使用的选择器比其他答案要明确

$("[name=pref]").on("change", function() {
  $("[name^=prefchk]").attr("disabled", this.value == "Email");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.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>