2011-08-18 3 views
7

値が1の選択オプションが選択されていて、いくつかの要素にクラスが追加されている場合、jQueryでチェックしようとしています。しかし、何かがうまくいかない。コードを見ていただけますか?jQuery IFオプションが選択されました

マイコード:

Reservation <br/> 
<select id="rReservation" name="rReservation" class=""> 
           <option value="0">Maybe</option> 
           <option value="1">Sure</option> 
</select> 
<hr/> 
Name <br/> 
<input type="text" name="rCardUser" class="mRequired" /> 

<hr/> 
Card<br/> 
<input type="text" name="rCardNrr" class="mRequired" /> 

jQueryの

if ($("#rReservation").val() == "1") { 
    $('.mRequired').addClass('required'); 
} else { 
    $('.mRequired').removeClass('required'); 
} 

フィドルでLIVE例 - http://jsfiddle.net/C7Gg3/

+0

コードだけで罰金に見えます。何がうまくいかない? –

答えて

10

あなたは、イベントハンドラ内で、それを必要とする:

$('#rReservation').change(function(){ 
    $('.mRequired').toggleClass('required', $(this).val() == '1'); 
}); 

http://jsfiddle.net/AlienWebguy/C7Gg3/1/

あなたはそれが負荷に簡単にトリガしたい場合は、1が「選択」されるまで、$('#rReservation").val()nullになりますので、オプションのいずれかにselected="selected"を追加する必要があります。例:http://jsfiddle.net/AlienWebguy/C7Gg3/3/

+0

'.toggleClass()'を使用する遠隔クリーナー、a​​migo ... –

+0

合意。彼のコードをすべて書き直したくないのですが、デモのためには、私が想像するスワップの価値があります。 – AlienWebguy

5

あなたはchangeイベントに耳を傾ける必要があります:あなたはあなたが聴いているように、あなたが変更イベントにコードを巻いてきたことを確認する必要があり

$("#rReservation").change(function(){ 
    if ($("#rReservation").val() == "1") { 
     $('.mRequired').addClass('required'); 
    } else { 
     $('.mRequired').removeClass('required'); 
    } 
}); 

http://jsfiddle.net/epkN8/

+1

-1彼はそうではありません。 – Maverick

+1

@Matt Anderson:どうしてですか?彼はオプションが選択されるたびにクラスを追加/削除しようとしています。 AFAIKを行う唯一の方法は、 'change'イベントを聞くことです。何か不足していますか? –

+0

彼は 'value = 1のselectオプションが選択され、いくつかの要素にクラスを追加すると、jQueryでチェックしようとしています。彼が '

3

たぶん、あなたは<select>値が変化クラスを毎回追加/削除する:

$(function() 
{ 
    $("#rReservation").change() 
    { 
     $('.mRequired').toggleClass('required', $(this).val() == "1"); 
    } 
}); 
+0

+1は、条件引き数を使用してトグルを使用することを提案します。 – AlienWebguy

関連する問題