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，然后使用类选择器按类名来定位元素。

您的解决方案无效，因为

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

2）你设置了错误的财产。您需要使用disabled代替disable：

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

<强> Working Demo

Answer 2

＆＃13;

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

＆＃13;

Answer 3

要获得您想要的内容，您可以使用这两种DOM遍历方法.closest()或.parents()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

首先，修复您的代码，以便您不会有重复的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'));
    });
 });

这将启用AND根据需要禁用它。

Answer 5

这种方法可以满足您的需求。

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery - 选中复选框启用表格旁边的字段

5 个答案: