radioボタンによる制御

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

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




radioボタンによる制御
■html
<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>
■javascript
$(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文の条件式はhtmlに合わせて頂ければと思います。
今回は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」をセットするとなります。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です