2011-10-19 18 views
2

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

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

あなたのコードの作品は、問題は何ですか? – xdazz

答えて

2

は、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')); 
}) 
3

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()ハンドラで宣言する必要があります。

+0

jsutがあなたにsuggesstionを試しました..まだ動作していません – tonoslfx

+0

jsfiddleの作業例を参照して、最新の記事を参照してください。 – Andrei

1

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

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

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

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

1

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

関連する問題