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）間違ったプロパティを設定しています。あなたはdisableの代わりにdisabledを使用する必要があります。

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

Working Demo

Answer 2

はあなたがこの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); 
 
          });