Question

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

如果未选中复选框，我想在复选框的同一行禁用textinput

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

Answer 1

使用此代码：

 $(":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>

Answer 2

尝试：

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

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

2 个答案: