jQuery - 复选框勾选启用它旁边的字段

Question

我目前有一个表格，一边是复选框和产品名称，另一边是数量输入字段。默认情况下，数量字段处于禁用状态，但我希望仅在检查其相应产品时启用。

我还是新来的jQuery，有点停留在此，所以这是一个最好的我能想出：输入元素

$(document).ready(function(){ 
 
      
 
      //enable quantity field if product is selected 
 
      $("input[name='quantity']").prop('disabled', 'true'); 
 
      $(".product").on('click', function(){ 
 
       $next = $(this).next(); 
 
       $next.prop('disable', 'false'); 
 
      }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="products"> 
 
    <thead> 
 
    <tr> 
 
     <th>Product Name</th> 
 
     <th width="150">Quantity</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td> 
 
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td> 
 
</tr> 
 
<tr> 
 
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td> 
 
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td> 
 
</tr> 
 
<tr> 
 
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td> 
 
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td> 
 
</tr> 
 
     </tbody> 
 
     </table>

Answer 1

您有重复的ID。 ID必须是唯一的。您可以使用classname，然后使用class selector通过classname来定位元素。

而且您的解决方案是行不通的，因为

1）你有错误的选择目标下一个输入元素。你需要遍历最接近的tr，然后在其中找到名称数量的元素。

2）您正在设置错误的属性。你需要使用disabled而不是disable：

$(".product").change(function(){ 
    $next = $(this).closest('tr').find('[name=quantity]'); 
    $next.prop('disabled', this.checked); 
}); 

Working Demo

Answer 2

为了得到你想要的，你可以用这个两种DOM遍历方法是什么.closest()或.parents()

$(document).ready(function(){ 
 
    //enable quantity field if product is selected 
 
    $("input[name='quantity']").prop('disabled', true); 
 
    $(".product").change(function(){ 
 
     $(this) 
 
      .parents('td') 
 
      .next() 
 
      .find('input') 
 
      .prop('disabled', !$(this).is(":checked")); 
 
       
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="products"> 
 
    <thead> 
 
    <tr> 
 
     <th>Product Name</th> 
 
     <th width="150">Quantity</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
<td><input type='checkbox' class='product' name='product'><label>Product</label></td> 
 
<td><input type='text' placeholder='0' name='quantity'></td> 
 
</tr> 
 
<tr> 
 
<td><input type='checkbox' class='product' name='product'><label>Product</label></td> 
 
<td><input type='text' placeholder='0' name='quantity' ></td> 
 
</tr> 
 
<tr> 
 
<td><input type='checkbox' class='product' name='product'><label>Product</label></td> 
 
<td><input type='text' placeholder='0' name='quantity' ></td> 
 
</tr> 
 
     </tbody> 
 
     </table>

Answer 3

首先，修正你的代码，以免你有重复的ID。它不会阻止代码运行，但它不是很好的HTML。

这是我会怎么写的脚本：

$(document).ready(function(){ 

    // Enable quantity field if product is selected 
    $("input[name='quantity']").prop('disabled', true); 

    $(".product").on('click', function() { 
     // Get reference to the text field in the same row with the name "quantity" 
     var $next = $(this).closest('tr').find('input:text[name="quantity"]'); 

     // Enable the text field if the checkbox is checked, disable it if it is unchecked 
     $next.prop('disabled', ! $(this).is(':checked')); 
    }); 
}); 

这将使并根据需要禁用它。

Answer 4

这种方法做你正在寻找的。

$(function(){ 
 
    $(':checkbox').change(function(){ 
 
    var prodId = $(this).data('productidckbx'); 
 
    if($(this).is(':checked')) { 
 
     $('#prodquantity-' + prodId).prop('disabled', false); 
 
    } else { 
 
     $('#prodquantity-' + prodId).prop('disabled', true); 
 
    } 
 
    }); 
 
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
 
<table id="products"> 
 
    <thead> 
 
    <tr> 
 
     <th>Product Name</th> 
 
     <th width="150">Quantity</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type='checkbox' id='product-1' name='product' data-productidckbx='1'> 
 
     <label>Product</label> 
 
     </td> 
 
     <td><input type='text' placeholder='0' name='quantity' id='prodquantity-1' disabled="disabled"></td> 
 
</tr> 
 
<tr> 
 
    <td><input type='checkbox' id='product-2' class='product' name='product' data-productidckbx='2'> 
 
    <label>Product</label> 
 
    </td> 
 
    <td> 
 
    <input type='text' placeholder='0' name='quantity' id='prodquantity-2' disabled="disabled"></td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <input type='checkbox' id='product-3' class='product' name='product' data-productidckbx='3'> 
 
    <label>Product</label> 
 
    </td> 
 
    <td> 
 
    <input type='text' placeholder='0' name='quantity' id='prodquantity-3' disabled="disabled"> 
 
    </td> 
 
</tr> 
 
     </tbody> 
 
     </table>

Answer 5

$(".product").on('change', function(){ 
 
       
 
       $(this).closest('tr').find("input[name='quantity']").prop('disabled',!this.checked); 
 
          });