チェックボックスにチェックでプルダウン有効化

締切済

質問者：jojo99
質問日時：2015/01/21 08:31
回答数：1件

チェックボックスにチェックを入れると、
無効化していたプルダウンが有効化するようなフォームを作りたいと思っています。

やりたいことはまさに下記サイトに書かれているとおりなのですが
自分でやるとコピペしてもうまく動かず困っています。

http://studio3104.hatenablog.com/entry/2014/10/1 …

当方ヴァージョンは『jquery-1.2.1.min.js』を使用しています。
無効化はできたのですが、チェックを入れても有効化しません。

『vue.js』もダウンロードしてみたものの、無効化すらうまくいかず…

何か他に方法があったりするものでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2015/01/21 10:35

こんにちは

＞何か他に方法があったりするものでしょうか？
基本的にはdisabled属性を操作することになるでしょうから、方法は同じと言えば同じでしょう。
全体の記述方法はいろいろあるかと思います。

ご提示のサンプルでは一意の要素を操作しているようなので、少しだけ一般化した一例を…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#hoge select{ width:5em; }
</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …

<script type="text/javascript">
$(function(){
$("#hoge").on("change", "input.fuga", function(){
var n = $(this).next("select");
if(this.checked) n.removeAttr("disabled");
else n.attr("disabled", "disabled");
});
});
</script>
</head>
<body>

<form name="hoge" id="hoge" method="get" action="#">
<p><input class="fuga" type="checkbox" checked>
<select name="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<p><input class="fuga" type="checkbox" checked>
<select name="sel2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>

</body>
</html>

※上記ではjQuery1.9.1を利用していますが、1.7以前の場合はonメソッドが使えないと思いますので、bind等で書き直す必要があります。