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