jQuery if文の条件分岐：セレクトボックスで「2012年８月10日・11日」のみを入力不可にする方法は？
- セレクトボックスで「2012年８月10日・11日」のみを入力不可にしてあげたいのですが、条件がうまく設定できずに困っています。
- 入力不可にはなるのですが、どうしても2012年8月以外の月でも入力不可になってしまいます。
- どなたか、お知恵を貸して下さい(*_ _)
- ベストアンサー
jQuery if文の条件分岐 (。ノдヽ。)
セレクトボックスで「2012年８月10日・11日」のみを入力不可にしてあげたいのですが、条件がうまく設定できずに困っています。 入力不可にはなるのですが、どうしても2012年8月以外の月でも入力不可になってしまいます。 どなたか、お知恵を貸して下さい(*_ _) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> <!-- $(function(){ if($("select[name='depyear'] option[value='2012']")) {if($("select[name='depmonth'] option[value='8']")) {$("select[name='depday'] option[value='10']").attr("disabled","disabled"); $("select[name='depday'] option[value='11']").attr("disabled","disabled"); } }else{}; }); --> </script> <table> <tr> <td bgcolor="#ffffff"> <select size="1" name="depyear"> <option value="2012">2012</option> <option value="2013">2013</option> </select> 年 <select size="1" name="depmonth"> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> 月 <select size="1" name="depday"> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> 日</td> </tr> </table> </body>
- ANEMOANEMOA
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 >セレクトボックスで「2012年８月10日・11日」のみを入力不可にしてあげたいのですが 2012年の8月を選んだ時に10日と11日にdisableを付加し、 それ以外では10日と11日にdisableは付けないという動きだと思いますが如何でしょうか。 その場合は変更する事にチェックを入れないといけないのでJavaScriptは以下のようになると思います。 (想定している動きと違っていたらすみませんが補足ください) ==== JavaScript $().ready ( function() { // 初回も呼ぶ(最初から2012年8月がセットされる場合を考慮) setDisabled(); // select要素の変更時にsetDisabledを呼ぶ $('select').change ( setDisabled ); function setDisabled() { // 年を取得 var year = $('select[name="depyear"]').val(); // 月を取得 var month = $('select[name="depmonth"]').val(); // まずは全てのdisableを取り除く $('select[name="depday"] option').removeAttr('disabled'); if ( year == 2012 && month == 8 ) { // 2012年の8月の場合は10日と11日にdisabledを付加 $('select[name="depday"] option[value="10"]').attr('disabled','disabled'); $('select[name="depday"] option[value="11"]').attr('disabled','disabled'); } } });
関連するQ&A
- 条件により押せないボタンを作りたい
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>
- ベストアンサー
- JavaScript
- jquery select要素のdisplay:noneについて
jqueryを使用して、要素の表示・非表示をさせたいのですが、 下記、コードで問題が出ています。 <html> <head> </head> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".dis").toggle( function(){ $("table.displayArea").attr("style","display:block"); }, function(){ $("table.displayArea").attr("style","display:none"); } ); }); </script> <body> <a href="#" class="dis">test</a> <table class="displayArea" style="display:none"> <tr> <td><select name=""> <option selected="selected">選択</option> </select></td> </tr> </table> </body> </html> aタグをクリックするとselectフォームがちゃんと表示されるんですが、 再度クリックしてもselectフォームが非表示にされません。 試しに、フォームでなくただのテキスト文字にしてみると、 ちゃんと、表示・非表示がうまくいきます。 その他のフォーム要素も試してみたのですが、問題ありませんでした。 なのでselect要素だけちゃんと非表示されないようです。 何が原因なのかお分かりになる方がいらっしゃいましたら、 ご教授いただけると幸いです。
- ベストアンサー
- JavaScript
- selectboxとcheckbox連動
下記ソースについて質問です。 jqueryを使って、 チェックボックスにチェックを入れたら、 一個目のセレクトボックスで選択した値を 二個目のセレクトボックスで選択しているようにしたいのですが、 ここからどうしたらよいでしょうか？ 具体的な方法を教えていただけないでしょうか？ <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> <!-- jQuery.noConflict(); var j$ = jQuery; j$(function () { j$(":input").focus(function(){ j$(this).css("background" ,"#7DBFE2"); }).blur(function(){ j$(this).css("background" ,""); }) j$(":submit").focus(function(){ j$(this).css("background" ,""); }).blur(function(){ j$(this).css("background" ,""); }) if (j$('input[type=checkbox]:last').attr('checked')) { j$("#selectAir").removeAttr("disabled"); } else { j$("#selectAir").attr("disabled", "disabled"); } j$('input[type=checkbox]:last').click(function() { if (this.checked) { j$("#selectAir").removeAttr("disabled"); j$("#selectAir").change($("#selectAirDelivery option:selected")); } else { j$("#selectAir").attr("disabled", "disabled"); } }); }); --> </script> </head> <body> <select id="selectAirDelivery" name="selectAirDelivery" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> <td width="55%" bgcolor="#FFF8DF"> <input id="chkIrai_sl1608" name="chkIrai_sl1[]" type="checkbox" value="608"><label for="chkIrai_sl1608"></label> <select id="selectAir" name="selectAir" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> </body> </html>
- 締切済み
- JavaScript
- selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。
- 締切済み
- JavaScript
- 初心者ですTT jQueryを使ったカレンダーのことについて教えて下さい。
jQueryを使ったカレンダーを途中まで作ることができましたが、 なかなか思うように完成させることができませんでしたTT 作りたいと思っているのは、年がテキストボックスで、 月と日がセレクトで入力するようなものにしたいと思っています。 年月日をそれぞれ入力して、「表示ボタン」をクリックすると、 カレンダーが表示されるところまで作ることはできましたが、 表示されたカレンダーの日付をクリックした時に、年のテキストボックスへ 年が入り、月と日のセレクトに反映されるというようにしたいんですが、 思うように作ることができませんでした。 どなたか教えていただけませんでしょうか・・・。 よろしくお願いします！ ↓以下ソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>カレンダーテスト</title> <!--カレンダー用jQuery--> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="ui.datepicker.js"></script> <script type="text/javascript" src="ui.datepicker-ja.js"></script> <link rel="stylesheet" href="jquery/themes/flora/flora.all.css" type="text/css" media="screen"> <script type="text/javascript"> window.onload = function () { $('#ex1').datepicker({ beforeShow:function(tag) { var y=parseInt($('#year').val()); var m=parseInt($('#month').val()); var d=parseInt($('#dayofmonth').val()); var dt=new Date(y,m-1,d); if(!isNaN(dt)) return{ defaultDate:dt}; } }); } </script> <!--カレンダー用jQuery--> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <!--カレンダーテスト--> <input id="ex1" type="hidden" size="20" value="today" /> <input id="year" type="text" size="4" />年 <select name="month" id="month"> <option value="" ></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>月 <select name="dayofmonth" id="dayofmonth" > <option value="" ></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select>日 <button onclick="$('#ex1').datepicker('show');">表示</button> <!--カレンダーテスト--> </td></tr></table> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスを使用した、フォームのアクティブ・非アクティブの切り替え
セレクトボックス（A）を使用して、（A）の選択結果により（A）以降をアクティブ・非アクティブに切り替えたいのです。 アクティブ・非アクティブの切り替え自体は正常に動くのですが、一度「送信する」をクリックした後、次の画面に移動し、その後「戻る」をクリックorブラウザの戻るで元のページに戻ると、アクティブ化できていたセレクトボックス（C）が全て非アクティブとなってしまっているのです。 原因は何でしょうか？よろしくお願いいたします。 function setTF() { n = document.mail.Data.selectedIndex; flag = eval(document.mail.Data.options[n].value); document.mail["B"].disabled = flag; document.mail["C"].disabled = flag; } ※以下HTML※ <form action="mail.cgi" method="post" name="mail"> <table> <tr> <th>セレクトボックス（A）</th> <td><select name="Data" onchange="setTF()"> <option value="false">アクティブ</option> <option value="true" selected="selected">非アクティブ</option> </select></td> </tr><tr> <th>テキスト（B）</th> <td><input size="4" type="text" name="B" disabled="disabled" /> 才</td> </tr><tr> <th>セレクトボックス（C）</th> <td><select name="C" disabled="disabled"> <option>選択肢1</option> <option>選択肢2</option> </select></td> </tr><tr> <td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- <input> タグテキストフィールドでのretrunの処理
以下のような<form>があります。この中のfreekey2のテキストエリア に入力した後に、enterキーを押した場合にも、javascript:query()を 動かしたいのです。<input>タグに何らかのイベントハンドラを つけるのでしょうか。よろしく、お願いします。 <form> <table> <tr> <td><select name="period"> <option value="all" selected>全て <option value="2006">2006 </select></td> <td><input type="button" value="検索" onclick="javascript:query()"></td> </tr> <tr> <td>キ－:<select name="freekey"> <option value=".*" selected>すべて <option>ああああ <option>いいいい </select> <input size="20" name="freekey2" type="text"> </td> </tr> </table> </form>
- ベストアンサー
- HTML
- jQuery テキストボックス読み取り解除
標題について、うまく動作しません。 お手数ですが、ご教授願えたらと思っています。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> 仕様：テキストボックスをクリックしたら、読み取り専用が解除される。 ※Ajaxの初期ロード時に各々の項目はreadOnly=true設定 上記が可能なら、その後拡張仕様として、フォーカスアウトした時に 再度 readOnly=trueに設定 html <table> <tr> <td><input type="text" id="code[1]" value="00001"></td> </tr> <tr> <td><input type="text" id="code[2]" value="00002"></td> </tr> <tr> <td><input type="text" id="code[3]" value="00003"></td> </tr> jQuery (function($){ $('input[type="text"]').click(function(){ $(this).attr('readonly','readonly'); }); }); Ajaxの設定は何とかできなのですが、 jQueryの設定がうまくいきません。 どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQuery 変数の使い方について
jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>
- ベストアンサー
- JavaScript
- avaSprictを使ってcookieに保存できるようにしたい
JavaSprictで動かす計算式を作りました。 見よう見まねで初めて作ったので色々と変なところがあるかもしれませんが とりあえず動作はOKな状態になっています。 HTMLソースと、jsファイルの中身は下記のようになっているのですが このファイルのINPUT1とINPUT2、プルダウン1とプルダウン2の内容を JavaSprictを使ってcookieに保存できるようにしたいです。 jsファイルをどのようにすれば良いでしょうか？ できれば、Saveボタンのようなものが無い状態で cookieを削除するまでずっと保存できる形にしたいです。 【HTMLソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <SCRIPT type="text/JavaScript" src="test.js"> </SCRIPT> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE> test </TITLE> </HEAD> <BODY onload="SetTarget()"> <P> test </P> <TABLE> <TBODY> <TR> <TD> INPUT1 </TD> <TD> <INPUT type="text" value="200" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> <TR> <TD> INPUT2 </TD> <TD> <INPUT type="text" value="500" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <TABLE border="1"> <TBODY> <TR> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン1 </OPTION> <OPTION value="1.4">P1-1 </OPTION> <OPTION value="1.5">P1-2 </OPTION> </SELECT></TD> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン2 </OPTION> <OPTION value="1.2">P2-1 </OPTION> <OPTION value="1.3">P2-2 </OPTION> </SELECT></TD> </TR> </TBODY> </TABLE> <HR> <SELECT onchange="ListSel(this.value)"> <OPTION value=",,"> リスト </OPTION> <option value="100,30,100"> リスト2 </option> <option value="1220,60,80"> リスト3 </option> </SELECT> <TABLE border="0" cellpadding="3" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#FFFFFF"> 1 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 2 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 3 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <HR> <B> Ans </B> <TABLE border="1"> <TBODY> <TR> <TD>Ans1</TD> <TD>Ans2</TD> <TD>Ans3</TD> </TR> <TR> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
回答が入っている事に気付かず、御礼が遅くなり申し訳ありません！！ 無理かと思い諦めていたのですが、もう一度やってみます！！ 有難うございます！！