JavaScript フォームでのラジオボタン制御

質問

JavaScript初心者です。

<input name="sample1" value="左ラジオボタン" checked="checked" type="radio"> 左ラジオボタン
<input name="sample1" value="右ラジオボタン" type="radio">右ラジオボタン

右ラジオボタンをクリックした場合に下記のラジオボタンをクリックできる

<input name="sample2" value="1" type="radio">1
<input name="sample2" value="2" type="radio">2

<input name="sample2" value="3" type="radio">3
<input name="sample2" value="4" type="radio">4

上記のように右ラジオボタンにチェックした時だけ1～4のラジオボタンをクリックできるように制御
したいのですがどのように書いて言ったらいいのか困っています。

$(function() {
$("[name='sample1']").click(function(){
var num = $("[name='sample1']").index(this);
if(num == 1){
$("[name='sample1']").attr("disabled", false);
} else {
$("[name='sample1']").attr("disabled", true);
}
});
});

上記のようにしてみたのですがここからどう下のラジオボタンを操作させるようにしていったらいいのかわかりません。

詳しい方どなたかご教示頂けないでしょうか？
宜しくお願い致します。

回答No.1

ONEONE · ベストアンサー

jqueryのセレクタはidが高速なので、なるべくidを使ってます。
右ラジオボタンにid="rightbtn"をつけます。
ラジオボタンはキーボード操作もあるのでchangeのほうが直感的に良さそう。
checkedの判定はtrue, falseを返すpropを使ってます。

検証してないですが、下記参考までに。

$("[name='sample1']").change(function(){
if($('#rightbtn').prop('checked') ){

$("[name='sample2']").attr("disabled", true);

} else {

$("[name='sample2']").attr("disabled", false);

}
});

お礼

早速のご回答感謝致します。

左ラジオボタンにid="leftbtn"と記入し

$(function() {
$("[name='sample1']").change(function(){
if($('#leftbtn').prop('checked') ){

$("[name='sample2']").attr("disabled", true);

} else {

$("[name='sample2']").attr("disabled", false);
}
});
});

上記のように設定すると出来ました！

大変助かりました！
ありがとうございます。

ただ、右ラジオボタンに一度チェックを入れてしまいますと
左ラジオボタンにチェックを戻しても
下のボタンが操作可能になってしまいます。

左ラジオボタンにすると完全に下の1～4のボタンを操作出来ないように
するにはどうすればいいんでしょうか？

大変恐縮ですが再度、ご教示して頂けると幸いです。
宜しくお願い致します。

回答No.3

Ogre7077

勝手ながら少し手を入れて実現
jQuery 1.7 以上です

<script>$(function(){
// 現状を読み取って、下のラジオボタンを操作する
function switchEnable(){
var cond = ($('input[name="sample1"]:checked').val() == 'R');
$('input[name="sample2"]').prop('disabled', !cond);
}
// ページ読み込み後に一回だけ実行
switchEnable();
// 特定の要素が変更される毎に実行
$('input[name="sample1"]').on('change', switchEnable);
})</script>

<p>
<label><input name=sample1 type=radio value=L checked>左ラジオボタン</label>
<label><input name=sample1 type=radio value=R>右ラジオボタン</label>
<p>
<label><input name=sample2 type=radio value=1>1</label>
<label><input name=sample2 type=radio value=2>2</label>
<label><input name=sample2 type=radio value=3>3</label>
<label><input name=sample2 type=radio value=4>4</label>

回答No.2

ONEONE

>左ラジオボタンにチェックを戻しても
>下のボタンが操作可能になってしまいます。

そんなことは無いと思いますが。。。
添付の画像のようになりませんか？
左なら不可、右なら可に変化するはずですが。

PS:　最初に左ボタンがcheckedなので下記をイベントの外に追加するとよいです。
$("[name='sample2']").attr("disabled", true);