人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptで、例えば3つのチェックボックスがあり、2つ以上選択すると、次の設問の6つ並んでいるラジオボタンのうちの最後2つを無効化するようなスクリプトをラジオボタン無効化のサンプルコードを参考に作ろうとしたのですが、うまくいきません。どのように書けばいいか、ご教示いただければ助かります。

●質問者: Ryuvay
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

こんな感じかな。jQuery 使ってます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
 $("input.cx").click(function() {
 if ($("input.cx:checked").length >= 2) {
 $("input.r").slice(4,6).attr("disabled", true);
 } else {
 $("input.r:disabled").attr("disabled", false);
 }
 });
});
</script>

<form>
<input type="checkbox" name="cx1" class="cx">check1<br>
<input type="checkbox" name="cx2" class="cx">check2<br>
<input type="checkbox" name="cx3" class="cx">check3<br>
<hr>
<label><input type="radio" name="r" class="r" value="1">radio1</label><br>
<label><input type="radio" name="r" class="r" value="2">radio2</label><br>
<label><input type="radio" name="r" class="r" value="3">radio3</label><br>
<label><input type="radio" name="r" class="r" value="4">radio4</label><br>
<label><input type="radio" name="r" class="r" value="5">radio5</label><br>
<label><input type="radio" name="r" class="r" value="6">radio6</label><br>
</form>

jsFiddle に置いてみたので、確認してみてください。
http://jsfiddle.net/a_kuma3/S3jJU/embedded/result/


Ryuvayさんのコメント
Prototype との競合に少しだけ悩まされましたが、問題なく稼動できました。 あと、 if ($("input.cx:checked").length >= 2) { の次の行に $("input[name='r']").val(['4']); を追加して、先に無効になるはずのラジオボタンを選択されていた場合に4つ目に強制移動させるようにして完璧になりました。 本当に助かりました。ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ