チェックボックスでフォームをアクティブにしたりパッシブにしたり切り替えてみる。
最初はCSSでサブミットボタンをdisplay:noneにする。
あとhtmlでdisabledをdisabledに設定する。
<input type="checkbox" name="active" id="active"><br /> <input type="text" name="user_name" id="user_name" disabled="disabled"><br /> <textarea name="question" id="text" disabled="disabled"></textarea><br /> <input type="submit" value="送信" id="submit">
後はチェックボックスにチェックを入れた際の処理を記述する
$(function() { $("#active").click(function() { if($("#active:checked").length > 0) { $("#user_name").attr('disabled', false); $("#question").attr('disabled', false); $("#submit").css('display', 'block'); } else { $("#user_name").attr('disabled', true); $("#question").attr('disabled', true); $("#submit").css('display', 'none'); } }); });
"#active:checked").length > 0でチェックされているかどうかを判断する。
チェックされていたらまずdisabledを解除する。
解除するのが以下
$(IDやクラスなど).attr('disabled', false);
あと非表示にしていたサブミットボタンを出す
$("#submit").css('display', 'block');
最後にチェックボックスのチェックを外された処理をelse以下に記述すれば問題ない!