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」をセットするとなります。