チェックボックスがオンの場合、jqueryは次の要素を無効にします

Question

チェックボックスをオンにすると、テキストボックスを無効にする方法を教えてください。 いくつかのテキストボックスとチェックボックスが隣にあります。

HTML：

<form id="form"> 
<input type="checkbox" name="deposit_checked"> <input type="text" name="deposit_value"> 
<input type="checkbox" name="booking_checked"> <input type="text" name="booking_value"> 
<input type="checkbox" name="referral_checked"> <input type="text" name="referral_value"> 
</form> 

私は以下のコードで個別にそれを行うことができます：時間を節約するために

$("input[name=deposit_checked]").change(function(){ 

if($("input[name=deposit_checked]").is(":checked")) { 
    $("input[name=deposit_value]").attr("disabled", false); 
} else { 
    $("input[name=deposit_value]").attr("disabled", true); 
} 

}) 

は、私が（.eachを使用してみました）と.next（）関数が、運：

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){ 
    if($(this).is(":checked")) { 
    $(this).next().attr("disabled", false); 
    } else { 
    $(this).next().attr("disabled", true); 
    } 
}) 
}) 

Answer 1

は、DOMは、選択オブジェクトスパンなどの代でカバー入力を最小限に抑えるためにため.txtboxclassがクラスである

$(document).ready(function() { 
    $('.chkboxClass').bind('change', function() { 

    if ($(this).is(':checked')) 
    $(this).next('.txtboxclass').hide(); 
    else 
    $(this).next('.txtboxclass').show(); 

    }); 
}); 

を変更しました。あなたがここにこの例を見ることができます

：http://jsfiddle.net/g4mQR/

<form id="form"> 
    <span> 
    <input type="checkbox" name="deposit_checked"> 
    <input type="text" name="deposit_value"> 
    </span> 
    <span> 
    <input type="checkbox" name="booking_checked"> 
    <input type="text" name="booking_value"> 
    </span> 
    <span> 
    <input type="checkbox" name="referral_checked"> 
    <input type="text" name="referral_value"> 
    </span> 
</form> 

JSコードを

$('#form input[type=checkbox]').click(function(){ 
    var obj = $(this).siblings('input[type=text]'); 
    obj.attr('disabled', !obj.attr('disabled')); 
}) 

Answer 2

disabled属性に間違った値を設定していました。ここに修正があります：

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){ 
    if($(this).is(":checked")) { 
    $(this).next().removeAttr("disabled"); 
    } else { 
    $(this).next().attr("disabled", "disabled"); 
    } 
}) 
}) 

jsfiddleの作業例は次のとおりです。すべてのjavascriptは$(window).load()ハンドラで宣言する必要があります。

Answer 3

これは、実行する必要があります。

$('#form input[type="checkbox"]').change(function() { 
    var t = $(this); 
    t.next().attr('disabled', ! t.is(':checked')); 
}); 

は最初のフィールドとチェックボックス状態を設定することを忘れないでください。たとえば、すべてがチェックされず、無効になっています。

+セレクタの#formビットを変更することができます。

Answer 4

iがnを隠すあなたが変更イベントを装着することにより、これを行うことができますので、そのチェックボックスにそれぞれtexboxを見せたいと思い、これは、それがどのように行われるかである。 changeイベントハンドラは毎回発射されたチェックボックスの値.chkboxclassは、すべてのチェックボックスのクラスであり、すべてのテキストボックス