Javascriptを使用して期日に応じてチェックボックスを有効にする方法

2012/08/27 16:28

このQ&Aのポイント

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"></script> という、期日が来たら画像の表示を消すソースが手元にあったので、これをいじって <script type="text/javascript"></script> としてみたのですが、私がJavascriptの知識が非常に浅いせいで文法が間違っているんだと思いますが、これでは正しく働いてくれませんでした。ちなみに、上のチェックボックスの部分のソースに onClick="chBx('ch3')" という記述があるのは、チェックボックスを3つ以上チェックできないようにするスクリプトを配置してあるためです。期日に応じてチェックボックスを有効にしたり無効にしたりするには、上の document.nForm.ch41.disabled=false; を少し書き換えるくらいでは何とかならないでしょうか？方法を教えて頂けるとありがたく存じます。どうかよろしくお願い致します。

chack
お礼率100% (288/288)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2012/08/29 16:58 回答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>

質問者