1

私は途方に暮れています-これで何時間も頭を悩ませた後、ここに質問を投げかける時が来ました。

チェックボックスでJavaScriptコードを実行して、チェックするといくつかのフォーム要素を有効にし、チェックを外すとそれらの要素を再び無効にしようとしています。

これが私が持っているjavascriptです：

function houseclean()
{
if (document.orderform.cleaning.checked == true)
  {
  document.orderform.rooms.disabled = false;
  document.orderform.datetime.disabled = false;
  document.orderform.howoften.disabled = false;
  }
else
  {
  document.orderform.rooms.disabled = true;
  document.orderform.datetime.disabled = true;
  document.orderform.howoften.disabled = true;
  }
}

そして、これが私のHTMLコードです。

<form id="orderform" style="margin-left: 6cm">
<input type="checkbox" name="cleaning" value="yes" onclick="houseclean()"/> Home cleaning <br />
Service: <select name="rooms" id="rooms" disabled >
  <option value="1bedroom">One Bedroom Apt</option>
  <option value="2bedroom">Two Bedroom Apt</option>
  <option value="3bedroom">Three Bedroom Townhome or SF Home</option>
  <option value="4bedroom">Four Bedroom Home</option>
  <option value="5bedroom">Five Bedroom Home</option>
  <option value="6bedroom">Six Bedroom Home</option>
</select> <br />
Date / Time: <input type="text" name="datetime" disabled /><br />
How often would you like a cleaning?: <select name="howoften" disabled>
  <option value="once">One Time Only</option>
  <option value="2bedroom">Every Week</option>
  <option value="3bedroom">Every Other Week</option>
  <option value="4bedroom">Once a Month</option>
</select> <br />
</form>
4

3 に答える 3

3

このコードはトリックを行います。要素 ID を明示し、可能な限り getElementById を使用する必要があります。

HTML:

<form id="orderform" style="margin-left: 6cm;">
<input type="checkbox" id="cleaning" name="cleaning" value="yes" onclick="javascript:houseclean();"/> Home cleaning <br />
Service: <select name="rooms" id="rooms" disabled >
  <option value="1bedroom">One Bedroom Apt</option>
  <option value="2bedroom">Two Bedroom Apt</option>
  <option value="3bedroom">Three Bedroom Townhome or SF Home</option>
  <option value="4bedroom">Four Bedroom Home</option>
  <option value="5bedroom">Five Bedroom Home</option>
  <option value="6bedroom">Six Bedroom Home</option>
</select> <br />
Date / Time: <input type="text" id="datetime" name="datetime" disabled /><br />
How often would you like a cleaning?: <select id="howoften" name="howoften" disabled>
  <option value="once">One Time Only</option>
  <option value="2bedroom">Every Week</option>
  <option value="3bedroom">Every Other Week</option>
  <option value="4bedroom">Once a Month</option>
</select> <br />
</form>​

そしてJavaScript：

function houseclean()
{
if (document.getElementById('cleaning').checked == true)
  {
  document.getElementById('rooms').removeAttribute('disabled');
  document.getElementById('datetime').removeAttribute('disabled');
  document.getElementById('howoften').removeAttribute('disabled');
  }
else
  {
  document.getElementById('rooms').setAttribute('disabled','disabled');
  document.getElementById('datetime').setAttribute('disabled','disabled');
  document.getElementById('howoften').setAttribute('disabled','disabled');
  }
}

JSFiddle の例: http://jsfiddle.net/HQQ4n/10/

于 2012-07-20T18:03:59.890 に答える
1

あなたのコードが機能するようになりました。id属性をフォーム要素に追加して、以前document.getElementByIdは安全側にいました。

JFiddle の例: http://jsfiddle.net/vxRjw/1/

于 2012-07-20T18:04:57.550 に答える