disableとすることなく、ユーザによる変更操作をjavascriptで無効化する方法を教えて下さい。

質問

<selectタグで作ったプルダウンメニューと、
<input type="checkbox"で作ったチェックボックスとについて教えて下さい。
何れも、disableとすると表示色が変わり、
しかも、プルダウンメニューの方は
<formを介して送信されるvalueが正常ではない場合があるようです。

そこで、プルダウンメニューとチェックボックスとの何れも、
disableとすることなく、ユーザによる変更操作をjavascriptで無効化したいのですが、やり方が分かりません。

ご存じの方、どうかよろしくお願い致します。

回答No.2

yambejp · ベストアンサー

変更させたくない・・・というだけならこんな処理で？

<input type="checkbox" onFocus="chk=this.checked" onChange="this.checked=chk">

<select onFocus="idx=this.selectedIndex" onChange="this.selectedIndex=idx">
<option value="">0</option>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>

お礼

oka5130様、yambejp様
早速教えて頂いたにもかかわらず、
お礼と返信が大変遅れ、申し訳ありません。

お二人に教えて頂いた対処の方法については、
双方試み、大変勉強になりました。

おかげさまで、これらの対処の方法を使い分けることで、
本件は解決致しました。

本当にありがとうございます。
今後ともどうかよろしくお願い致します。

回答No.1

oka5130

JavaScriptで無効化する方法はちょっと思いつかないのですが、
もし出来たとしても、disableを指定していないのに操作できないのは
ユーザーにとって使いにくい（なぜ変更できないかわからない）
フォームになってしまうので、次のような方法をオススメします。

【もともとのフォーム（disabledを指定するとデータが送信されない）】
<select name="select1" disabled>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="check1" disabled>1
<input type="checkbox" name="check2" checked disabled>2

【修正案】
<select name="select1_dummy" disabled>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<input type="checkbox" name="check1_dummy" value="1" disabled>1
<input type="checkbox" name="check2_dummy" value="1" checked disabled>2
<!-- hiddenで渡す -->
<input type="hidden" name="select1" value="1">
<input type="hidden" name="check2" value="1">