• ベストアンサー
  • 困ってます

期日に応じてチェックボックスを有効にしたり無効に

<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; を少し書き換えるくらいでは何とかならないでしょうか? 方法を教えて頂けるとありがたく存じます。 どうかよろしくお願い致します。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数106
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.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

  • 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;">&nbsp;</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>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (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>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<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>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<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>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<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>

  • チェック出来る数を制限&チェックされない場合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"> 上記を同時に満たしたいというのが今回の質問の趣旨です。

  • チェックボックスの無効化、有効化

    あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、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>

  • チェックボックスで画像を一括表示

    下記サイトを参照して、 「チェックボックスのON / OFFで画像を表示する」 「全てのチェックボックスのON / OFFを切り替える」 を組み合わせて、 「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。 http://iswebmag.hp.infoseek.co.jp/sample163.html http://iswebmag.hp.infoseek.co.jp/sample164.html ▼htmlソースです。 <FORM name="f1"> <INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星 <BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.f1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.f1)"> </FORM> ▼チェックボックスのON / OFFで画像を表示するJavaScript <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> ▼全てのチェックボックスのON / OFFを切り替えるJavaScript <SCRIPT language="JavaScript"> <!-- function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> </SCRIPT>

  • 一方のチェックボックスのON/OFFに応じてもう一方をON/OFFに

    文末のように、「親」「子」のチェックボックスがあります。 規定値は双方ともにONです。 「親」のチェックがOFFになったら、「子」は無効(disable)に、 再び「親」のチェックがONになったら、「子」はactiveにしたいです。 過去に本掲示板でご教示いただいたスクリプトを応用したら 何とか実現できたのですが、シンプルな動作なので もっと簡潔(2行位??)にできそうに思います。 いかがなものでしょうか? <html> <head> <script language="javascript" type="text/javascript"> function autochk(f,name){ var names=document.getElementsByName(name); for(var i=0; i<1; i++){ names[i].disabled = !f.checked; } } </script> </head> <body> <form id="query" name="query"> <input type="checkbox" name="oya" value="1" checked onclick="autochk(this,'ko');">親 <input type="checkbox" name="ko" value="1" checked>子</div> </form> </body> </html>

  • java script フォームのチェックボックス入力制限について

    java script フォームのチェックボックス入力制限について どなたかお教えください。 以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし)、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。 サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。 よろしくお願いします。 <script type="text/javascript"> function fchk3(obj){ var frm=obj.form; var len=frm.elements.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].checked=false; frm.elements[i].disabled=true; } } } } </script> <form name="form3" action="#"> <label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br /> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label> </form>

  • 動的に作ったチェックボックスが選択できません!!

    こんにちは 閲覧ありがとうございます。 タイトルの通り、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*****">チェックボックス1</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の指定などもしてみたのですが、うまくいきませんでした。 どうやったらチェックをできるようになるでしょうか>< プログラミング初心者なので、変なところとかがあったらすいません。。。 よろしくお願いします!!

  • チェックボックスの値の取得

    初歩的なことがわかりません。 チェックボックスをクリックしたときに、そのチェックボックスの値(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を勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB=AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE-A=BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <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='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。