2014年2月16日日曜日

jQuery チェックの有無でテキスト入力のdisabledを制御する


チェックボックスやラジオボタンでその他にチェックが付いている時のみテキストへの入力を許可する


前提

<input type="radio" value="1" id="PayDescription1" name="data[Pay][Description]" />
<label for="PayDescription1">食費</label>
<input type="radio" value="2" id="PayDescription2"name="data[Pay][Description]" />
<label for="PayDescription2">交通費</label>
<input type="radio" value="3" id="PayOther" name="data[Pay][Description]" />
<label for="PayOther">その他</label>
<input type="text" name="data[Pay][OtherText]" id="PayOtherText" />

$(function(){
    $("#PayOther").change(function(){                                                                                                                  
        if ($("#PayOther").is(':checked')){                                                                                                            
            $("#PayOtherText").prop('disabled', false);                                                                                                
        } else {                                                                                                                                                                                        
            $("#PayOtherText").prop('disabled', true);                                                                                                 
        }                                                                                                                                                                                               
    }).change();                                                                                                                                                                                        
})


<input type="checkbox" value="1" id="PayDescription1" name="data[Pay][Description]" />
<label for="PayDescription1">食費</label>
<input type="checkbox" value="2" id="PayDescription2"name="data[Pay][Description]" />
<label for="PayDescription2">交通費</label>
<input type="checkbox" value="3" id="PayOther" name="data[Pay][Description]" />
<label for="PayOther">その他</label>
<input type="text" name="data[Pay][OtherText]" id="PayOtherText" />

$(function(){
    $("#PayOther").change(function(){                                                                                                                  
        if ($("#PayOther").is(':checked')){                                                                                                            
            $("#PayOtherText").prop('disabled', false);                                                                                                
        } else {                                                                                                                                                                                        
            $("#PayOtherText").prop('disabled', true);                                                                                                 
        }                                                                                                                                                                                               
    }).change();                                                                                                                                                                                        
})



0 件のコメント:

コメントを投稿