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

我有一个复选框列表，其中包含6个复选框。相应的单选按钮放置在每个复选框旁边。当页面加载时，单选按钮被禁用。当我选中复选框时，我想启用旁边的单选按钮。此外，如果我取消选中复选框，旁边的单选按钮将被取消选中并再次禁用。选择复选框并使用jQuery启用相应的单选按钮

该复选框供用户选择他们想要的物品，单选按钮供用户选择他喜欢的物品。

下面我曾尝试这个代码，但它是不工作...

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

实现这一行为的任何想法？

在此先感谢！

来源

2013-08-30 Litash

你也可以在你的html中使用像data-for-radio =“rbtnlLeadAgencies_3”'这样的自定义属性，并在复选框上添加一个onchange事件来修改相关的广播。更快速和明确的ID链接。 – TecHunter

@TecHunter这些HTML由asp.net从复选框列表服务器控件生成。可以添加onchange事件来触发jQuery函数，如 AAA？ – Litash

如果它是生成的，然后考虑最通用的方法来做到这一点，你会看到不同的时候维护或添加新的链接复选框等....更具体，更通用的最佳组合来自生成的页面。我不知道ASP sry – TecHunter

尝试

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

来源

2013-08-30 08:48:44

谢谢先生，我喜欢你使用.closest（'tr'）的风格。index（） – Litash

@Litash我对自动取消选择代码 –

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

来源

2013-08-30 08:48:10

感谢您告诉我attribute-starts-with-selector。我正在尝试与您的代码类似的逻辑，但我不知道如何获取ID。：D – Litash

@Litash欢迎:)帮忙:) –

-1

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

});

来源

2013-08-30 09:00:34

做了一些修改，因为这个而不工作 – TecHunter

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

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/

来源

2013-08-30 09:22:11 TecHunter

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

回答

相关问题