兄弟をテーブル行から外すことができません

隣接する列から入力の種類を無効にしようとしましたが、その行に対してチェックボックスがオンになっています。私は以下のように試みましたが、無効にすることはできません。見て、無効にする方法を提案してください。兄弟をテーブル行から外すことができません

$("input:checkbox[class=associationcheckbox]").each(function() { 
 
    var index; 
 
    $(this).on('click', function() { 
 
    if ($(this).prop('checked')) { 
 
     $(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false); 
 
    } else { 
 
     $(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <table> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

出典

2016-07-20 Balanjaneyulu K

jQueryは2回含まれています。スニペットにエラーがありますか？ –

条件が同じであることを無効にするfalseにすることで、あなたが望むものを明確にすることができますか？ ifとelseの両方が '.prop（" disabled "、false）;' – guradio

こんにちはGuadio、申し訳ありません。チェックボックスをオンにすると、無効にする必要があります。有効になっている状態です。 –

あなたのセレクタは、すべての場所の上に少しです。クラスのケースは一致する必要があります。each()は不要で、tdをinputのクラスで選択しようとしていますが、これはうまくいかないでしょう。 disabledをifの両側のfalseに設定しますが、これは単に誤植であると想定しています。

必要な機能を達成するには、クラスごとにチェックボックスに1つのクリックハンドラを追加し、関連するテキストボックスを見つけ、checkedプロパティに基づいて無効/有効に設定します。これを試してみてください：

$(".associationCheckbox").on('click', function() { 
 
    $(this).closest('tr').find('.associationCheckbox1').prop("disabled", this.checked); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
</head> 
 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <table> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Balu</td> 
 
     <td> 
 
     <input class="associationCheckbox" type="checkbox" name="Balu" /> 
 
     </td> 
 
     <td> 
 
     <input class="associationCheckbox1" type="number" name="Balu" value="0" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

私はまた、あなたがassociationCheckbox1としてテキストボックスのクラスを変更することをお勧めは少し混乱しています。

出典

2016-07-20 10:39:25

こんにちは。それは完全に動作します。ありがとうございました。私はクラス名を変更します。 –

兄弟をテーブル行から外すことができません

答えて

関連する問題