JavaScriptでフォーム 連動と制限

フォームで選択肢を連動させて選択の制限をしたいです。

選択リストA 選択肢:1、2、3
選択リストB 選択肢:4、5、6

★選択リストAが1の時、選択リストBは4、5しか選択できない
★選択リストAが2の時、選択リストBは5、6しか選択できない

汚いのですが、下記の記述でローカルでは動くことを確認したのですが、
サーバーにあげるとうまく動作しません。(エラーメッセージは出ませんでした)
記述方法がよくないのでしょうか。
inputの指定はidかclassでやりたいです。
またjQueryで書きましたが、JavaScriptに変更できたりしますでしょうか。

わがままを言って申し訳ないのですが、よろしくお願いいたします。

html

<form action="" class="form"> <h3 for="name">選択リストA</h3> <div class="form_list"> <label for="">1<input type="checkbox" name="food01" value="1" id="food01"/></label> <label for="">2<input type="checkbox" name="food02" value="2" id="food02"></label> <label for="">3<input type="checkbox" name="food03" value="3" id="food03"></label> </div> <h3 for="name">選択リストB</h3> <div class="form_list"> <label for="">4<input type="checkbox" name="food04" value="4" id="food04"/></label> <label for="">5<input type="checkbox" name="food05" value="5" id="food05"></label> <label for="">6<input type="checkbox" name="food06" value="6" id="food06"></label> </div> <input type="button" id="" value="送信"> </form>

JavaScript

$(function(){ checkedButton(); $('#food01,#food02').change(function(){ checkedButton(); }); function checkedButton(){ if($('#food01').prop('checked')){ $('#food04').prop('disabled', true); }else{ $('#food04').prop('disabled', false); }; if($('#food02').prop('checked')){ $('#food05').prop('disabled', true); }else{ $('#food05').prop('disabled', false); }; } });

コメントを投稿

0 コメント