使用 jquery 获取选中的单选按钮的值

Question

我想在更改时获取所选单选字段的值。如果选择的值为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);
  }
});

Answer 1

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