我想在更改时获取所选单选字段的值。如果所选值是 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
?
If the selected value is Admin I want to disable the group of fields with ID permissions_forms and all those checkboxes inside it should be checked.
$checkboxes.prop({ "disabled": true, 'checked': true});
将使复选框禁用并选中。
为什么prop
而不是attr
?
来自 jquery 的文档:
To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
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>
关于javascript - 使用 jquery 获取选中单选按钮的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38637297/