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); 
 
          });