0
チェックボックスをオンにすると、入力を有効/無効にしたいとします。私は同じ構造の私のサイトに多くのセクションがあるので、私は使用する必要があることを知っているチェックボックスが有効な場合、jQueryは他の行の入力を無効にします
this
建設。私はこのようなことを試みたが、うまくいかなかった。誰でも私を助けることができますか?
$('.component-other').on('click', function(){
var isChecked = $(this).is(':checked');
if (isChecked) {
$(this).closest('.row').find('.component-other-value').prop("disabled", false);
} else {
$(this).closest('.row').find('.component-other-value').prop("disabled", true);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<label for="sause-oth">Other</label>
<input type="checkbox" name="sause" id="sause-oth" class="enable component-other">
</div>
</div>
<div class="row input-row">
<div class="col-sm-12">
<input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here">
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<label for="sause-oth">Other</label>
<input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other">
</div>
</div>
<div class="row input-row">
<div class="col-sm-12">
<input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here">
</div>
</div>
</div>
</section>
@Andreas。私は2つのセクションを作るために要素をコピーしました – MMPL1