javascript - 使用jQuery获取选中的单选按钮的值

我想更改时获取所选单选字段的值。如果选择的值为Admin，我要禁用ID为permissions_forms的字段组，则应选中其中的所有复选框。否则，如果该值不是Admin，则应启用它们。

我尝试获取值，但更改功能在我的情况下不起作用。
有人可以帮我吗？这是Jsfiddle

这是HTML代码：

<ul class="radio" id="role">
  <li>
    <input id="role-0" name="role" type="radio" value="User">
    <label for="role-0">User</label>
  </li>
  <li>
    <input checked="" id="role-1" name="role" type="radio" value="Admin">
    <label for="role-1">Admin</label>
  </li>
</ul>
<br/><br/><br/><br/>
<ul class="checkbox" id="permissions_forms">
  <li>
    <input checked="" id="diagnsosis_forms-0" name="diagnsosis_forms" type="checkbox">
    <label for="diagnsosis_forms-0"> Checkbox enable when admin selected</label>
  </li>
  <li>
    <input checked="" id="diagnsosis_forms-1" name="diagnsosis_forms" type="checkbox" >
    <label for="diagnsosis_forms-1"> Checkbox enable when admin selected</label>
  </li>
</ul>

和jQuery代码：

$('#role').change(function() {
  selected = $('input[name=role]:checked').val();
  if (selected == "Admin") {
    alert('Admin');
    $("#permissions_forms :input").attr("disabled", true);
    $("#permissions_forms").parent().siblings().find(':checkbox').attr('checked', this.checked);
  }
  else{
  $("#permissions_forms :input").attr("disabled", false);
  }
});

最佳答案

类还是ID？

不要将相同的ID分配给多个元素。 ID应该是唯一的。使用类代替。

<div id="im-unique">Earth</div>

<div class="im-not-unique">Star 1</div>
<div class="im-not-unique">Star 2</div>

如何使用jquery切换属性disabled和checked？


  如果选择的值为Admin，我想禁用ID为Permissions_forms的字段组，则应选中其中的所有复选框。


$checkboxes.prop({ "disabled": true, 'checked': true});将使复选框处于禁用状态并选中。

为什么prop不是attr？

从jQuery的文档：


  若要检索和更改DOM属性，例如表单元素的选中，选定或禁用状态，请使用.prop（）方法。

function onChange() {
  var selected = $('input[name=role]:checked').val();
  var $checkboxes = $("#diagnsosis_forms-0, #diagnsosis_forms-1", "#permissions_forms");
  if (selected == "Admin") {
    $checkboxes.prop({ "disabled": true, 'checked': true});
  }
  else {
    $checkboxes.prop("disabled", false);
  }
}
onChange()
$('#role').change(onChange);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="radio" id="role">
  <li>
    <input id="role-0" name="role" type="radio" value="User" class="">
    <label for="role-0">User</label>
  </li>
  <li>
    <input checked="" id="role-1" name="role" type="radio" value="Admin">
    <label for="role-1">Admin</label>
  </li>
</ul>
<br/><br/><br/><br/>
<ul class="checkbox" id="permissions_forms">
  <li>
    <input checked="" id="diagnsosis_forms-0" name="diagnsosis_forms" type="checkbox">
    <label for="diagnsosis_forms-0"> Checkbox enable when admin selected</label>
  </li>
  <li>
    <input checked="" id="diagnsosis_forms-1" name="diagnsosis_forms" type="checkbox" >
    <label for="diagnsosis_forms-1"> Checkbox enable when admin selected</label>
  </li>
</ul>