Javascriptを使用して期日に応じてチェックボックスを有効にする方法
- Javascriptの文法を誤っているため、チェックボックスの有効化が正しく機能していないようです。
- チェックボックスの有効化は、document.getElementByIdを使用して行うことができます。指定した要素のdisabled属性をfalseに設定することでチェックボックスを有効にすることができます。
- 期日に応じてチェックボックスを有効にするには、Dateオブジェクトを使用して現在の日付と比較する必要があります。条件を満たす場合にのみ、document.getElementByIdを使用してチェックボックスを有効にすることができます。
- ベストアンサー
期日に応じてチェックボックスを有効にしたり無効に
<input name="希望区域" onClick="chBx('ch1')"type="checkbox" id="ch1" value="末広町 " disabled="disabled"> <input name="希望区域" onClick="chBx('ch2')"type="checkbox" id="ch2" value="緑町 " disabled="disabled"> <input name="希望区域" onClick="chBx('ch3')"type="checkbox" id="ch3" value="新田町 " disabled="disabled"> ・ ・ ・ <input name="希望区域" onClick="chBx('ch39')"type="checkbox" id="ch39" value="青空台 " disabled="disabled"> と、約70個のチェックボックスが並んでおり、例えば、9月末になったらch5～ch9のチェックボックスを有効に、10月15日になったらch11～ch18をdisabledで無効に…といった具合に、期日に応じてチェックボックスを有効にしたり無効にしたりしたいのですが、Javascriptの具体的な書き方がわかりません。 <script type="text/javascript"><!-- var d1 = new Date("Nov 6, 2003 00:00:00"); var d2 = new Date(); var d3 = new Date("Aug 16,2012 00:00:00"); if ((d1.getTime() < d2.getTime()) && (d2.getTime() < d3.getTime())) { document.write("<img src=\"..\/..\/images\/new.gif\" width=\"35\" height=\"12\"align=\"absmiddle\">"); } // --></script> という、期日が来たら画像の表示を消すソースが手元にあったので、これをいじって <script type="text/javascript"><!-- var d1 = new Date("Nov 6, 2003 00:00:00"); var d2 = new Date(); var d3 = new Date("Aug 16,2012 00:00:00"); if ((d1.getTime() < d2.getTime()) && (d2.getTime() < d3.getTime())) { document.nForm.ch41.disabled=false; } // --></script> としてみたのですが、私がJavascriptの知識が非常に浅いせいで文法が間違っているんだと思いますが、これでは正しく働いてくれませんでした。 ちなみに、上のチェックボックスの部分のソースに onClick="chBx('ch3')" という記述があるのは、チェックボックスを3つ以上チェックできないようにするスクリプトを配置してあるためです。 期日に応じてチェックボックスを有効にしたり無効にしたりするには、上の document.nForm.ch41.disabled=false; を少し書き換えるくらいでは何とかならないでしょうか？ 方法を教えて頂けるとありがたく存じます。 どうかよろしくお願い致します。
- chack
- お礼率100% (283/283)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
かいとうがつきませんね？ とりあえず、firefox でうごきます ぜんかくくうはくは、はんかくに おきかえしてください ひづけの くぎりが いいかげんだったり。 <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> input[type="checkbox"]:disabled + label { color: #aaf; } input[type="checkbox"]:checked + label { border-bottom: 2px red solid; } </style> <form> <input name="希望区域" type="checkbox" value="末広町"><label>末広町</label> <input name="希望区域" type="checkbox" value="緑町"><label>緑町</label> <input name="希望区域" type="checkbox" value="新田町"><label>新田町</label> <input name="希望区域" type="checkbox" value="洋野町"><label>洋野町</label> </form> <script type="application/javascript; version=1.8"> function hashDictionary (a,b) { return b.value ? ((a[b.value] = b), a): a } function toElement (a) { return this.dic[a] } function setDisabled (a) { a.disabled = !!this.disabled } function setState (condition) { var a = condition.date.match (/\d+/g); if (! a) throw new Error; var sDate = +(new Date (a[0], a[1]-1, a[2])); var eDate = +(new Date (a[3], a[4]-1, a[5])); var ary = []; if (sDate <= this.target) { if (this.target <= eDate) { ((condition.item instanceof Array) ? condition.item: [condition.item]) .map (toElement, this) .forEach (setDisabled, condition); } } } var ConditionList = [ { date: '2012-08-05/2012-08-31', item: ['洋野町', '緑町'], disabled: true }, { date: '2012年08月05日/2012年08月31日', item: ['末広町', '新田町'], disabled: false } ]; var checkbox = document.querySelectorAll ('form input[type="checkbox"][name="希望区域"]'); var hash = Array.prototype.reduce.call (checkbox, hashDictionary, new Object); ConditionList.forEach (setState, {dic: hash, target: +(new Date)}); //_________________ document.addEventListener ('click', function (event) { var e = event.target; if ('checkbox' === e.type) alert (e.value + 'を押したね'); }, false); </script>
関連するQ&A
- チェックボックスの無効化、有効化
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号（t1、t2、t3やc1、c2、c3）が振られている必要がありますが、 これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか？ nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } </script> <form name="form2" action="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>
- ベストアンサー
- JavaScript
- チェック出来る数を制限&チェックされない場合0
【チェックボックスにチェック出来る数を制限しながら、チェックされない場合には0を入力する】ということが希望です。 それぞれを分離させた場合は、下記で可能でした。 この2つを同時に満たす方法が分かりません。 ご教授頂きたくお願いいたします。 【チェックボックスにチェック出来る数を制限する方法】 <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5"); chc = 3; // チェックできる数 // チェックボックスにチェックできる数を制限する function chBx(cn){ cnt = 0; for(i=0; i<chn.length; i++) { if(document.form1.elements[chn[i]].checked) cnt++; } if(cnt > chc) { alert("チェックできる項目は" + chc + "個までです"); document.form1.elements[cn].checked = false; } } //--> </SCRIPT> <input type="checkbox" name="ch1" value="2" onClick="chBx('ch1')"> <label for="type1">1</label> <BR> <input type="checkbox" name="ch2" value="2" onClick="chBx('ch2')"> <label for="type1">2</label> <BR> <input type="checkbox" name="ch3" value="3" onClick="chBx('ch3')"> <label for="type1">3</label> <BR> <input type="checkbox" name="ch4" value="4" onClick="chBx('ch4')"> <label for="type1">4</label> <BR> <input type="checkbox" name="ch5" value="5" onClick="chBx('ch5')"> <label for="type1">5</label> <BR> 【チェックボックスがチェックされない場合に0を入力する】 <input type="hidden" name="ch1" value="0"> <input type="checkbox" onclick="this.form.ch1.value=this.checked ? 1 : 0"> <input type="hidden" name="ch2" value="0"> <input type="checkbox" onclick="this.form.ch2.value=this.checked ? 1 : 0"> <input type="hidden" name="ch3" value="0"> <input type="checkbox" onclick="this.form.ch3.value=this.checked ? 1 : 0"> <input type="hidden" name="ch4" value="0"> <input type="checkbox" onclick="this.form.ch4.value=this.checked ? 1 : 0"> <input type="hidden" name="ch5" value="0"> <input type="checkbox" onclick="this.form.ch5.value=this.checked ? 1 : 0"> 上記を同時に満たしたいというのが今回の質問の趣旨です。
- ベストアンサー
- JavaScript
- Javascriptでラジオボタンとチェックボックスの値を足して計算し
Javascriptでラジオボタンとチェックボックスの値を足して計算しようとしました。 しかし、チェックボックス同士の値は足されるのですが、ラジオボタンの値は計算されずにそのまま表示されます。 ラジオボタンの値も足されるようにするにはどうしたら良いでしょうか。 よろしくお願いいたします。 javascript↓ function calc2() { var ss=""; var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { //formが複数ある場合、formの数だけ繰り返し d = fs[f].elements; //dにform内のエレメントを代入 checkvalue = 0; //checkvalueの値を0にする。ここをcheckvalue = ""; にすると、文字列として扱われる for (var i = 0; i < d.length; i++ ) { //form内のエレメントの数だけ繰り返し if (d[i].checked == true) { //チェックボックスがチェックされていたら checkvalue += Number(d[i].value); //checkvalueの値（整数の場合）にそれぞれのエレメントの値（value）を追加していく } } ss += checkvalue; function addFigure(str) { //3桁のカンマ挿入 var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } var sss = addFigure(ss); //ssの値にカンマを挿入してsssに代入 } document.getElementById('ch_all').innerHTML = "\\" + sss; //html本文内のid="ch_all"の場所に書き出す } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;"> </div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>
- ベストアンサー
- JavaScript
- 一つのチェックボックスでテキストフィールドとプルダウンリストを制御
現在以下のようなテキストフィールドとプルダウンがあります。 <form name="register" action="register_kakunin.php" method="post"> <input type="checkbox" name="name_check" onclick="fchk(this,1);" /> <input name="revenue" onChange="keisan()" type="text" id="revenue" size="6" readOnly="true"/> <input type="checkbox" name="chk" onclick="fchk2(this)" /> <select name="paymethod" disabled="disabled"> <option value="">Pay Method</option> <option value="cash">cash</option> <option value="card">card</option> <option value="point">point</option> <option value="coupon">coupon</option> </select> </form> これを function fchk(obj, name_check){ var frm=document.register; if(!obj.checked){ /* チェックされたら、テキストボックスを有効化 */ frm.revenue.readOnly=true; }else{ /* チェックが外されたら、テキストボックスを無効化 */ frm.revenue.readOnly=false; } } function fchk2(obj) { var frm=obj.form; var len=frm.elements.length; /* フォームの要素数 */ if(obj.checked==true){ /* チェックボックスが選択されている場合、 プルダウンを有効化（disabled=false） */ frm.elements["paymethod"].disabled=false; }else{ /* チェックボックスが選択されていない場合、 プルダウンを無効化（disabled=true） */ frm.elements["paymethod"].disabled=true; } } という2つのスクリプトで制御しているのですが、前者を操作するときには必ず後者も操作することになるため、一つのチェックボックスで2つとも制御できるようにしたいのですが、どうしたらいいのでしょうか？ 上記のjavascriptはネットから拾ってきたもので、自作ではありません。 宜しくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスの値の取得
初歩的なことがわかりません。 チェックボックスをクリックしたときに、そのチェックボックスの値(Value)を取得する方法をアドバイス下さい。 <SCRIPT language=JavaScript> function test() alert(★)←この辺をうまく書きたい。 </SCRIPT> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="玄関" onclick="test()">玄関<BR> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="トイレ" onclick="test()">トイレ<BR> 「玄関」をクリックすると「玄関です」とalert 「トイレ」をクリックすると「トイレです」とalert 他のチェックボックスにチェックが入っているかは無視。クリックしたチェックボックスのvalueをalert。 下記質問の作業の初めの段階でつまづいています。 (^^; http://www.okweb.ne.jp/kotaeru.php3?q=387758
- ベストアンサー
- JavaScript
- 複数あるチェックボックスの入力チェックするには？
チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか？ <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- チェックボックスのチェックについて
submit時に一つでもチェックがなければアラートを表示 チェックがあれば進む・・・としたいです。 <form action=next.html name=form1> <input type=checkbox name=checkbox1 value=1> <input type=checkbox name=checkbox2 value=2> <input type=checkbox name=checkbox3 value=3> <input type=checkbox name=checkbox4 value=4> <input type=checkbox name=checkbox5 value=5> ～以下50まで続きます <input type=submit value=submit> </form> function countChecked(form1) { var total = 0; var max = 50; for (var index = 0; index < form1.checkbox.length; index++) { total += form1.checkbox[index].checked ? 1 : 0; } if(countChecked(document.form1)) > 0) { return true; } else { alert("no"); return false; } return(total); } 過去に似たような質問を参考に作ってみましたがダメでした。 チェックボックスの名前の付け方が悪いのでしょうか。
- ベストアンサー
- JavaScript
- 動的に作ったチェックボックスが選択できません！！
こんにちは 閲覧ありがとうございます。 タイトルの通り、HTMLのcheckboxをjQuery/javascriptで動的に作ったのですが、動かなくて困っています。 単純に一つ一つcreateElement()で作った場合は大丈夫なのですが、作りたいものが入れ子になった状態です。 まず、作りたいものをHTMLで書くと以下になります。 <div class="input-checkbox"> <span class="kintoneplugin-input-checkbox-item"> <input type="checkbox" name="checkbox" value="value*****" id="id*****"> <label for="id*****">チェックボックス１</label> </span> </div> そして、次にこの形を動的に作ろうとしたものが以下です。 上のHTMLの<div class="input-checkbox">はあるという前提で、その子に動的に作った要素を入れようとしています。 arrayとあるのは、この内容をfor文で回すためです。 //1.span要素作成 var checkSpan = document.createElement('span'); checkSpan.className = "input-checkbox-item"; //2.checkbox作成 var viewCheckBox = document.createElement('input'); viewCheckBox.type = "checkbox"; viewCheckBox.name = "checkbox"; viewCheckBox.id = array2[k]; viewCheckBox.value = array2[k]; viewCheckBox.disabled=""; //3.ラベル作成 var viewLabel = document.createElement("label"); viewLabel.for = array2[k]; viewLabel.id = "label_"+k; viewLabel.innerHTML = array[k]; 4.//追加 $('.input-checkbox').append($(checkSpan).append(viewCheckBox).append(viewLabel)); 上記の内容で実行すると、チェックボックスとそのラベルは表示されるのですが、チェックボックスが編集不可というか、、チェックできないのです。 disabledの指定などもしてみたのですが、うまくいきませんでした。 どうやったらチェックをできるようになるでしょうか＞＜ プログラミング初心者なので、変なところとかがあったらすいません。。。 よろしくお願いします！！
- 締切済み
- JavaScript
- ラジオボタンが選択によるチェックボックス・ボタンの制御方法
お世話になります。 やりたい事 (1)ラジオボタン【小学校】：小学校のみ入力可 (2)ラジオボタン【中学校】：中学校（市立・私立）のみ入力可 (3)ラジオボタン【全ての学校】：小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスグループの一部のボックスだけを常に無効化したい
チェックボックスグループの一部のボックスだけを常に無効 （readonly、disabled）にする方法があればご教示ください。 たとえば、以下でみかんだけを無効にする、という具合です。 <INPUT TYPE="CHECKBOX" NAME="kudamono" value="りんご">りんご <INPUT TYPE="CHECKBOX" NAME="kudamono" value="みかん">みかん <INPUT TYPE="CHECKBOX" NAME="kudamono" value="なし">なし （もちろんJavascript、CSS可、IE6限定で動作すれば十分です。） よろしくお願い致します。
- ベストアンサー
- HTML
お礼
こ・・・これは・・・ 私が応用しようとしていたコードをちょっといじったくらいではダメだったんですね。 私の頭ではこれを理解するのにかなり時間がかかりましたが、どういうことなのかおかげさまでわかりました。 ご回答ありがとうございました。