dポイントプレゼントキャンペーン実施中!

2つのセレクトボックスがあり、どちらも選択していれば「検索」ボタンを押せるが
どちらか1つでも選択していなければ「検索」ボタンを押せない状態にしたいのですが
どのようにすれば可能でしょうか?

<script type="text/javascript">
jQuery(function() {
jQuery('#change_btn').click(function() {
jQuery.post('price.php',
{
size : jQuery('#size').attr('value'),
days : jQuery('#days').attr('value')
},
callBack);
});
});
function callBack(data) {
jQuery('#change_area').html(data);
}
</script>

<form action="" id="form1" method="post">
<select name="size" id="size">
<option value="">---選択してください---</option>
<option value="s1">サイズ01</option>
<option value="s2">サイズ02</option>
<option value="s3">サイズ03</option>
</select>
<select name="days" id="days">
<option value="">---選択してください---</option>
<option value="d6">6日</option>
<option value="d8">8日</option>
</select>
<input type="button" id="change_btn" value="検索" />
</form>

A 回答 (2件)

対象のボタンをdisabled(あるいは非表示)などにしておいて、セレクトボックスのonchangeイベントでセレクトボックスの値を両方チェックし、OKならボタンのdisabled設定を解除(または表示)のような処理をしてあげればよろしいかと思います。

    • good
    • 0

<form action="#" id="form1" method="post">


<select name="size" id="size" onchange="hohe()">
<option value="">---選択してください---</option>
<option value="s1">サイズ01</option>
<option value="s2">サイズ02</option>
<option value="s3">サイズ03</option>
</select>

<select name="days" id="days" onchange="hohe()">
<option value="">---選択してください---</option>
<option value="d6">6日</option>
<option value="d8">8日</option>
</select>
<input type="button" id="change_btn" value="検索" disabled>
</form>
--
function hohe () {
var d = document;
var e0 = d.getElementById ('size');
var e1 = d.getElementById ('days');
var e2 = d.getElementById ('change_btn');

e2.disabled = !(e0.value && e1.value);
}
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!