选中复选框并使用jQuery启用相应的单选按钮
Select checkboxes and enable corresponding radio button using jQuery
我有一个包含6个复选框的复选框列表。每个复选框旁边都会放置一个相应的单选按钮。页面加载时,单选按钮将被禁用。当我选中复选框时,我想启用它旁边的单选按钮。此外,如果我取消选中复选框,它旁边的复选按钮将被取消选择并再次禁用。
复选框用于用户选择他们想要的项目,单选按钮用于用户选择他最喜欢的项目。
我试过下面的代码,但它不起作用。。。
$(document).ready(function () {
$("#rbtnlLeadAgencies input[type='radio']").each(function () {
$("#rbtnlLeadAgencies input[type='radio']").prop('disabled', true);
});
$("#cbxlAgencies input[type='checkbox']").each.change(function () {
if ($("#cbxlAgencies_0 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_0 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_1 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_1 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_2 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_2 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_3 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_3 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_4 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_4 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_5 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_5 input[type='radio']").prop('disabled', false);
});
});
标记和jQuery代码在jsfiddle 上
有实现这种行为的想法吗?
提前感谢!
尝试
$(document).ready(function () {
$("#rbtnlLeadAgencies input[type='radio']").prop('disabled', true);
$("#cbxlAgencies input[type='checkbox']").change(function () {
var idx = $(this).closest('tr').index();
var radios = $("#rbtnlLeadAgencies tr").eq(idx).find('input[type="radio"]').prop('disabled', !this.checked);
if(!this.checked){
radios.prop('checked', false);
}
});
});
演示:Fiddle
DEMO
$(document).ready(function () {
$('input:radio[id^="rbtnlLeadAgencies_"]').prop('disabled', true);
$('input:checkbox[id^="cbxlAgencies"]').change(function () {
var id = this.id.replace('cbxlAgencies_', '');
$("#rbtnlLeadAgencies_" + id).prop('disabled', !this.checked);
});
});
^
属性以选择器开始
正如我在评论中所说,这是一个在标记方面有点昂贵但更通用的解决方案:
HTML
<input id="cbxlAgencies_0" data-for-radio="rbtnlLeadAgencies_0" type="checkbox"/>
JS
$(document).ready(function () {
$("input[type='checkbox'][data-for-radio]").change(function () {
$('#' + $(this).data('for-radio')).prop('disabled', !this.checked);
}).change();
});
http://jsfiddle.net/techunter/7M54h/
尝试jsfiddle代码。
$(document).ready(function () {
$("#rbtnlLeadAgencies input[type='radio']").attr('disabled', true);
$("#cbxlAgencies input[type='checkbox']").change(function () {
$("#rbtnlLeadAgencies_0").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_1").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_2").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_3").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_4").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_5").prop('disabled', !this.checked);
});
});
相关文章:
- 如何启用单选按钮
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 单选按钮的验证(启用)&使用Jquery Optimization从复选框中选择submit按钮
- 如何根据是否通过jsp中的jstl选中单选按钮来启用和禁用下拉列表
- 内联JavaScript启用/禁用点击单选按钮上的选择和文本框
- 如何同时禁用和启用单选按钮
- 启用特定输入上的单选按钮
- 根据服务器时间禁用启用单选按钮
- 需要在选择单选按钮上启用提交按钮
- 禁用或启用单选按钮的Javascript
- 如何基于单选按钮切换启用/禁用输入字段
- 如何在选择单选按钮后启用提交按钮
- 启用单选按钮的文本框使用 javascript 列出列表项值之一
- 如果文本框 1、文本框 2、文本框 3 中存在值,如何启用单选按钮 1 和文本框 4
- 是否可以在更改单选按钮时禁用/启用jquery功能
- 自动启用单选按钮
- 启用单选按钮在加载时勾选
- 在文本字段值上启用单选按钮
- 禁用和启用单选按钮
- 启用单选按钮时,值在textfield >比x