radioボタン制御 | よく使うjQuery

radioボタンを使ってselect等のdisabledを制御する方法です。フォーム以外でも使用する機会がが多いかと思います。

<label><input type="radio" name="test" checked="checked" /> テスト1</label>　
<label><input type="radio" name="test" /> テスト2</label>
<select disabled="disabled">
<option>dddd</option>
<option>eeee</option>
<option>ffff</option>
</select>

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

解説

[attribute=value]で属性（attribute）が特定の値（value）を持っているものを指定するので、今回の例でいうと、「name属性の値が”test”のものをクリックしたら」となります。

$("[name='test']").click(function() {

↓変数「num」にクリックしたname属性の値が”test”のオブジェクトの番号を格納します。

var num = $("[name='test']").index(this);

↓if文の条件式はｈｔｍｌに合わせて頂ければと思います。
今回はname属性の値が”test”のオブジェクトは2つだけなので、selectから「disabled」をはずす条件式は、num == 1とします（indexは0から始まるので、1は実質2つ目radioボタンの番号）。

if(num == 1) {
	$("select").attr("disabled", false);
} else {
	$("select").attr("disabled", true);
}

つまり、クリックしたname属性の値が”test”のオブジェクトの番号が、1の場合はselectの「disabled」をはずし、それ以外は「disabled」をセットするとなります。