ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:jQuery:複数のチェックボックスのうち、特定チェックボックスにチェックされたとき、入力欄を有効にする方法

スポンサーリンク

複数のラジオボタンがあって、その他を選ばれた場合だけその他を入力してもらうための入力欄を有効にしなければならなくなりました。
手っ取り早く以下の方法で実現しました。

HTML側

その他を選ばれているか判定するために、id属性をその他にだけ追加します。

<form method="POST" action="next.php"> 
    <input type="checkbox" name="check[]" value="1">値1<br>
    <input type="checkbox" name="check[]" value="2">値2<br>
    <input type="checkbox" name="check[]" value="3">値3<br>
    <input type="checkbox" name="check[]" id="check" value="99">その他&nbsp;<input type="text" name="other" id="other" value="" >
</form>

f:id:AJYA:20161113231040j:plain
photo credit: jepoirrier Remind me later. Twice via photopin (license)

JavaScript

id属性でチェックボックスの状態を判定して、入力欄の有効/無効を切り替えます。

$("#check").change(function(){
    if ($("#check").prop("checked")) {
        $("#other").attr("disabled",false);
    } else {
        $("#other").attr("disabled",true);
    }
});


選ばれているチェックボックスのvalueを調べて、その他のvalueだったら入力欄を有効にする。
選ばれているチェックボックスのvalueに、その他のvalueがなかったら入力欄を無効にする。
こういう方法も考えられますが、手間がかかります。
この方法であれば手早く作成ができます。