2016-07-07 23 views
2

「ラジオボタンを読み取り専用にする方法」の質問既に質問されているn回。しかし、解決策は常にdisabled="disabled"です。ラジオボタンを読み取り専用にするが、無効にする方法はありますか?

(も複雑なJavaScriptのソリューション、clickまたはchangeイベントでその仕事も、価値の変動を防ぐため、通常は、多かれ少なかれ汚いハックの匂いを持っているすべてのことができます。)

問題/ disabled="disabled"の副作用は、それがデータセットからフィールドを "削除"し、それがサーバーに送信されないということです。しかし同時に、それらを提出し、フォーム上のサーバーに送信されるようにする - 私が欲しいもの

は、ラジオボタンが/変更するだけでなく、読みようにすることです。 disabledがこの要件を満たしていない場合、readonlyはラジオボタンでは機能しないようです。

のみ読み取り設定したフォームデータから削除することなく、ボタンを作成するための正しいHTML属性とは何ですか?

+0

なぜ画像と隠しフィールドを使用しないのですか? –

答えて

4

は、いくつかのCSSを使用してみてください:

input[type="radio"].readonly { 
    opacity: 0.5; /* not necessary */ 
    pointer-events: none; 
} 
+0

はちょうど 'ポインタevents'はIE(http://caniuse.com/#search=css%20pointer-events)といくつかの問題を持っていることを指摘したいと思いますが、その後、なぜあなたは最初の場所でIEを使用してだろう。 – Th3Gam3rz

+0

本当に便利.. – Mask5323

0

これはあなたが何を意味するかである場合。 radio buttonには値があり、その値を削除または変更したくないのですが、その値をユーザーに表示して、彼の同意を通知したいと考えています。それから、私はこれがうまくいくと思います。

radio buttonnameアトリビュートだけが割り当てられており、このような属性もcheckedです。

<input type="radio " name="my_radio_btn" value="its_value" checked /> 

この方法で、ユーザーはそれを

+0

はchecked'は値必要 '答えをありがとう、しかし - 。' checked'または空の文字列(複数可[仕様](https://www.w3.org/TR/html-markup /input.radio.html#input.radio.attrs.checked))。そして 'checked =" "'は変更を防ぎません。 – automatix

+0

あなたの質問に対する解決策を見つけましたか? –

+0

いいえ、残念ながらそうではありません。唯一のクリーンなソリューションは 'readonly'のような属性です。他のすべては、多かれ少なかれ汚い回避策です。しかし、そのような属性(まだ)はないようです。 – automatix

0

のチェックを外すことができないこれは少しハック思えるかもしれませんが、onclickイベントが焼成されたときに、あなただけの初期状態であることをラジオボタンの値を設定することができますそれ。

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <input id="button1" type="radio" onmouseover="setValue(this)" onclick="retainValue(this)" checked> Radio Example 
 
    <input id="button2" type="radio" onmouseover="setValue(this)" onclick="retainValue(this)"> Radio Example 
 
    <script> 
 
     var checkboxes = {}; 
 
     function setValue(el) { 
 
     if(!(el.id in checkboxes)) 
 
      checkboxes[el.id] = el.checked; 
 
     } 
 
     function retainValue(el) { 
 
     if(!(el.id in checkboxes)) 
 
      checkboxes[el.id] = el.checked; 
 
     el.checked = checkboxes[el.id]; 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

それはあなたがページにしたいとあなたはそれぞれが固有のIDを持って提供されるような多くの無線を持つことができます。

あなたは達成するために、多くは簡単だろうにjQueryを使用するために喜んでいる場合。

関連する問題