WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptでdisabledを使うとEnterがきかない!?

0:[投稿] あい [2005/02/22 13:58 ][環境:わからない わからない]

はじめまして。突然ですが教えていただきたい事があるのです。

現在ラジオボタンを作成しています。
片方のラジオボタンがチェックされている場合、チェックボックスを使用不可にし、もう片方のラジオボタンがチェックされている場合、チェックボックスを使用可にしております。
こちらは、JavaScript/disabledにて制御しております。

しかし、disabledを使用することによって、同じ画面に存在しているテキストボックスボックスにフォーカスがある時に、enterキーを押してもボタンが押下されなくなってしまいました。
(ラジオボタン、チェックボックス、テキストボックス、ボタン、の順で同画面に配置してあります。)
どうもdisabledが影響しているように思えるのです・・・。
(disabledを使用しないとenterキーでボタン押下が可能です。)
disabledとenterキーには、何か関係があるのでしょうか??

また、disabledで使用不可にしたチェックボックスのvalueは次画面で取得できないのでしょうか??
試してみたところ、disabledで使用不可にしたチェックボックスの値はIsEmptyでかえってきてしまいます。
使用不可になっている場合でも、チェックがしているのであれば、そのvalueを取得したいのです。
そんな方法はあるのでしょうか??

以上です。

ご迷惑かけますが、
もし分かる方いましたら、どうぞよろしくお願いいたします。


1:[回答] AC1号 [2005/02/22 22:14 ]

どのWebブラウザを使用しているか書いて下さい。そうでないと回答できない部分があります。

回答可能な部分のみ。
>また、disabledで使用不可にしたチェックボックスのvalueは次画面で取得できないのでしょうか??
>試してみたところ、disabledで使用不可にしたチェックボックスの値はIsEmptyでかえってきてしまいます。
>使用不可になっている場合でも、チェックがしているのであれば、そのvalueを取得したいのです。
disabled属性のついたチェックボックスはHTMLの仕様で値を送らないことが決められているので、直接値を取得することはできません。
別にinput type="hidden"な要素を作成し、その要素に値を設定します。


2:[関連] あい [2005/02/23 10:28 ]

回答ありがとうございます。

>どのWebブラウザを使用しているか書いて下さい。そうでないと回答できない部分があります。
↑現在私が使用しているWebブラウザはInternetExplorer Version6.0になります。
回答よろしくお願いいたします。

>disabled属性のついたチェックボックスはHTMLの仕様で値を送らないことが決められているので、直接値を取得することはできません。
>別にinput type="hidden"な要素を作成し、その要素に値を設定します。
↑了解しました。
hiddenにて値を設定することによって、disabledされたも値を取得することができました。


3:[回答] AC1号 [2005/02/24 23:00 ]

>>2
こちらで実験してみましたが、再現しません。(WinXP,IE6SP2)
ソースを書いてみて下さい。


4:[関連] あい [2005/02/25 16:41 ]

実験ありがとうございます。

一部変えてありますが、だいたいのソースを書きます。
ソースの方に問題があるのでしょうか??
よろしくおねがいいたします。

<html>
<head>
<title>期間選択</title>
</head>
<body bgcolor="#FFFFFF" OnLoad="selectcheck(f)">

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
<% '##### 期間選択可否 ##### %>
function selectcheck(fm) {
   var i;
   if (fm.elements[0].checked == true) {
       for (i = 0; i < fm.KIKAN.length; i++) {
           fm.elements[i+2].disabled = true ;
       }
   }
   else {
       for (i = 0; i < fm.KIKAN.length; i++) {
           fm.elements[i+2].disabled = false ;
       }
   }
}
// -->
</SCRIPT>

<center>
<form method="POST" action="xxx.asp" name="f">
 <table border="0" width="500" height="1">
   <tr><td align="center" colspan=2>
     <table border="0" width="500">
       <tr>
         <td colspan="2"><input type="radio" checked name="T_SELECT" value="1" OnClick="selectcheck(f)">
             期間選択不可×
         </td>
         <td colspan="2"><input type="radio" name="T_SELECT" value="2" OnClick="selectcheck(f)">
             期間選択可○
         </td>
       </tr>
       <tr>
         <td width="90" valign="top">期間</td>
         <td><input type="checkbox" checked name="KIKAN" value="1">1月</td>
         <td><input type="checkbox" checked name="KIKAN" value="2">2月</td>
         <td><input type="checkbox" checked name="KIKAN" value="3">3月</td>
       </tr>
     </table>
   </td></tr>
 </table>
 <table border="0" width="500" height="1">
   <tr><td align="center"><font size="2">番号を入力してください</font></td></tr>
   <tr>
     <td align="center">
       <input type="text" name="BB" size="3" maxlength="3">
     </td>
   </tr>
   <tr><td align="center"><input type="image" src="images/xxx.gif" name="AA" border="0" alt="試算"></td></tr>
 </table>
</form>
</center>
</body>
</html>


5:[回答] AC1号 [2005/02/28 00:18 ]

>>4
JavaScript内にASPのコメントと思われる部分があるので、これを削除した上で確認しましたが、やはり再現しませんでした。


6:[関連] 夜叉姫 [MAIL] [2005/03/14 22:44 ]

私もJavaScript内で
form.object_name.disabled = true または,
form.object_name.disabled = false制御を行ったあとEnterキーでSubmit処理が呼び出されない現象に遭遇しました。
windows 2000 sp4 IE6.0.28

現象:
・「指定しない」にチェックを入れてもdisabled処理は呼ばれないので、Enterキーが動作します。
・「今月(新着)」にチェックを入れると、外部jsファイルないのメソッドでdisable処理が行われます。この後指定しないにフォーカスを戻してもEnterキーが動作しません。
  が、テキストフィールドにフォーカスを戻すとEnterキーが動作するようにもどります。・・・orz


少し助長ですが、JavaScriptサンプルを添付致します。
<html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<script language="JavaScript" src="test.js"></script>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="http://www.google.com" onsubmit="">
<table>
    <tr align="left" valign="middle" bgcolor="#FFFFFF">
        <td height="28" align="right" valign="middle" class="padding_r5"><input type="input" value="ok" /><br/></td>
    </tr>
        <td height="28" align="right" valign="middle" class="padding_r5">情報更新日</td>
        <td class="padding_l5">
            <input name="update_ts_cond" type="radio" value="" id="update_ts_cond_non"/>
            <label for="update_ts_cond_non">指定しない </label>
            <input name="update_ts_cond" type="radio" value="1" id="update_ts_cond_1" onClick="changeUpdateTsCond()"/>
            <label for="update_ts_cond_1">今月(新着)</label>
            <input name="update_ts_cond" type="radio" value="2" id="update_ts_cond_2" onClick="changeUpdateTsCond()"/>
            <label for="update_ts_cond_2">前月 </label>
        </td>
    </tr>
    <tr align="left" valign="middle" bgcolor="#FFFFFF">
        <td height="28" align="right" valign="middle" class="line_bottom1 padding_r5">&nbsp;</td>
        <td class="line_bottom1 padding_l5">
            <input name="update_ts_cond" type="radio"  value="3" onClick="changeUpdateTsCond()" />
            <select name="update_up_y" class="update_ts" disabled >
                <option value="2005" selected>2005年</option>
                <option value="2006">2006年</option>
            </select>
            <select name="update_up_m" class="update_ts" disabled >
                <option value="01" selected>1月</option>
                <option value="12">12月</option>
            </select>
        </td>
    </tr>
    <tr><td>
   <input type=image src="./btn_search.gif" width="112" height="25" vspace="2" border="0" align="absmiddle"
    name="btn_submit" alt="検索" />
        </td>
    </tr>
</table>
</form>
</body>
</html>


---------------------
ここから下は、test.js ファイルの内容です。
---------------------
function changeUpdateTsCond() {
   var form = document.form1;
   var state = false;
    form.update_up_y.disabled = state;
    form.update_up_m.disabled = state;
    alert("sub test.js");
}

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World