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

Question

I have a checkbox list which contains 6 checkboxes. A corresponding radio button is placed beside each checkbox. When page load, the radio buttons are disabled. When I check the checkbox, I want to enable the radio button beside it. Furthermore, if I uncheck the checkboxes, the radio button beside it will be deselected and disabled again.

The checkbox is for the user to choose items they want, and the radio button is for the user to pick his favourite item.

I have tried this code below but it is not working...

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

 });

The markups and jQuery code are on jsfiddle

Any ideas of achieving this behavior?

Thanks in advance!

Answer 1

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

Answer 2

Try

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

 });

Demo: Fiddle

Answer 3

As I said in my comment here is the solution which is a bit expensive in markup but more generic :

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/

Answer 4

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

});