Disabling text box on click of checkbox not working using jquery

Question

I am unable to delete text and disable a text box using a jquery code, below is my code. Alert is also working whether I check or uncheck the checkbox. Please suggest.

   <script>
        $(document).ready(function(){
          var arr= new Array('1','2','3','4','5');
          for(var i=0;i<arr.length;i++)
              {
                $("#Q4x1_"+arr[i]).click(function(){
                    if($("#Q4x1_"+arr[i]).prop('checked',true))
                        {
                            alert("hi");
                            $("#Q4x2_"+arr[i]).val('');
                            $("#Q4x2_"+arr[i]).prop('readOnly',true);
                        }
                    else
                        {
                            $("#Q4x2_"+arr[i]).val('testing');
                                                $("#Q4x2_"+arr[i]).prop('readOnly',false);
                        }
                });
              }
        });
      </script>
  </head>

  <body>
  <table border="1">
  <tr>
  <td><input type="checkbox" id="Q4x1_1"></td>
  <td><input type="text" id="Q4x2_1"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_2"></td>
  <td><input type="text" id="Q4x2_2"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_3"></td>
  <td><input type="text" id="Q4x2_3"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_4"></td>
  <td><input type="text" id="Q4x2_4"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_5"></td>
  <td><input type="text" id="Q4x2_5"></td>
  </tr>


  </table>
  </body>
  </html>

You should use `this.checked` instead of `$("#Q4x1_"+arr[i]).prop('checked',true)` — Satpal, Jun 26 '14 at 08:04
But is it wrong to use this way? I did the same for only one checkbox and one text box. it worked fine that way. — Vaibhav, Jun 26 '14 at 08:06

Milind Anantwar · Accepted Answer · 2014-06-26T08:11:17.653

0

You can simply use:

$('input:checkbox').change(function(){
 var checked = $(this).prop('checked');
 var nextinp=$(this).parent().next().find('input');
 nextinp.prop('disabled', checked);
 if(checked)
   nextinp.val(''); 
});

Working Demo

edited Jun 26 '14 at 08:11

answered Jun 26 '14 at 08:05

Milind Anantwar

81,290
25
94
125

Disabling text box on click of checkbox not working using jquery

1 Answers1