disabling a text input in html if a checkbox is not checked and vice versa using JQUERY

Question

I have a html table having different rows and columns, the text input has a class similar to the value of the checkbox

I would like to disable a textinput in the same row as the checkbox if the checkbox is not checked

This is the html

<table>
<tr>
<td><input type="checkbox" name="new" value="37"></td>
<td><input type="text" name="new" id="quantity" class="37"></td>
</tr>

 <tr>
<td><input type="checkbox" name="new" value="38"></td>
<td><input type="text" name="new" id="quantity" class="38"></td>
</tr>
  .....#this continue
</table>

I would like to check if the checkbox is checked hence disable the input

How can i go on using jquery

Possible duplicate of [enabled and disabled text input on checkbox checked and unchecked](http://stackoverflow.com/questions/15140237/enabled-and-disabled-text-input-on-checkbox-checked-and-unchecked) — d.coder, Aug 23 '16 at 15:01
The one which is there works olnly if you have only one text and checkbox otherwise it fails — Geoff, Aug 23 '16 at 15:11

Ehsan · Accepted Answer · 2016-08-23T15:29:41.237

Use this code :

 $(":checkbox[class=ch]").on("change",function(){

 $("input[class = " + $(this).attr("value") + "]").prop("disabled",!$(this).prop("checked"));

 })

Final Code :

<html>
    <title>This is test</title>
    <head>
        <style>
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
            <td><input class="ch" type="checkbox" name="new" value="37"></td>
            <td><input type="text" name="new" id="quantity" class="37" disabled></td>
            </tr>

             <tr>
            <td><input class="ch" type="checkbox" name="new" value="38"></td>
            <td><input type="text" name="new" id="quantity" class="38" disabled></td>
            </tr>
            </table>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
$(document).ready(function(){
    
    $(":checkbox[class=ch]").on("change",function(){
        $("input[class = " + $(this).attr("value") + "]").prop("disabled",!$(this).prop("checked"));
        
    })
    
})
        </script>
    </body>
</html>

I have other checkboxes could you please include the id of the checkbox in the code — Geoff, Aug 23 '16 at 15:12
@GEOFFREYMWANGI , Use of `class` instead of a `Id`.I updated my answer.if help you mark it. — Ehsan, Aug 23 '16 at 15:28

score 0 · Answer 2 · answered Aug 23 '16 at 15:01

Try:

$('input[type=checkbox]').each(function(){
  if($(this)){
   $(this).siblings("input[type=text]").prop('disabled', false);
  }
else{
  $(this).siblings("input[type=text]").prop('disabled', true);
}
});
$('input[type=checkbox]').click(function(){
if($(this)){
   $(this).siblings("input[type=text]").prop('disabled', false);
  }
else{
  $(this).siblings("input[type=text]").prop('disabled', true);
}
});

disabling a text input in html if a checkbox is not checked and vice versa using JQUERY

2 Answers2