选择复选框并使用 jQuery 启用相应的单选按钮答案

【问题标题】：Select checkboxes and enable corresponding radio button using jQuery选择复选框并使用 jQuery 启用相应的单选按钮
【发布时间】：2013-08-30 17:51:27
【问题描述】：

我有一个包含 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

有实现这种行为的想法吗？

提前致谢！

【问题讨论】：

你也可以在你的 html 中使用像 data-for-radio="rbtnlLeadAgencies_3" 这样的自定义属性，并在复选框上添加一个 onchange 事件来修改关联的收音机。更快、更明确的 id 链接。
@TecHunter 这些 HTML 是由 asp.net 从复选框列表服务器控件生成的。是否可以添加onchange事件来触发像 AAA 这样的jQuery函数？
如果它是生成的，那么请考虑最通用的方法来执行此操作，您会在维护或添加新的链接复选框等时看到差异......不太具体，更通用总是来自生成时的最佳组合页。我不知道 ASP sry
@TecHunter 感谢您的提示：D

标签： javascript jquery html checkbox

【解决方案1】：

试试

 $(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

【讨论】：

谢谢您，先生，我喜欢您使用 .closest('tr').index() 的风格

【解决方案2】：

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);
     });
 });

^ attribute-starts-with-selector

【讨论】：

感谢您告诉我属性启动与选择器。我正在尝试与您的代码类似的逻辑，但我不知道如何获取 ID。 :D

【解决方案3】：

正如我在评论中所说，这里的解决方案在标记上有点贵，但更通用：

HTML

<input id="cbxlAgencies_0" data-for-radio="rbtnlLeadAgencies_0" type="checkbox"/>

$(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/

【讨论】：

【解决方案4】：

试试jsfiddle code。

$(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);
     });

});

【讨论】：