如果未选中复选框，则禁用html中的文本输入，反之亦然

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

本文关键字：html 反之亦然 文本 输入 复选框 如果      更新时间：2023-09-26

我有一个html表格有不同的行和列，文本输入有一个类类似于复选框的值

如果复选框未被选中，我想禁用与复选框同一行的文本输入

这是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>

我想检查复选框是否被选中，因此禁用输入

如何继续使用jquery

使用以下代码:

 $(":checkbox[class=ch]").on("change",function(){
 $("input[class = " + $(this).attr("value") + "]").prop("disabled",!$(this).prop("checked"));
 })

最终代码:

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

尝试:

$('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);
}
});
相关文章：