Select checkboxes and enable corresponding radio button using jQuery

1
votes

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!

4
javascriptjqueryhtmlcheckbox
you could also use a custom attribute like data-for-radio="rbtnlLeadAgencies_3" in your html and add a onchange event on checkbox to modify associated radio. faster and explicit id link. – TecHunter
@TecHunter these HTML is generated by asp.net from a checkbox list server control. Is it okay to add the onchange event to trigger jQuery function like <asp:ListItem onChange="jqFunction" Value="AAA">AAA</asp:ListItem> ? – Litash
if it's generated then consider the most generic way to do this, you will see the difference when maintaining or adding new linked checkboxes etc.... less specific, more generic alway best combo when coming from generated pages. I dunno ASP sry – TecHunter
@TecHunter Thanks for the hint :D – Litash

4 Answers

0
votes

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

0
votes

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

0
votes

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/

-1
votes

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

});