ラジオボタンを「読み取り専用」にできないのはなぜですか？

ラジオボタンを表示し、その値を送信してもらいたいのですが、状況によっては編集できないようにしてください。Disabledは値を送信しないため（またはそうですか？）機能せず、ラジオボタンがグレー表示されます。読み取り専用は本当に私が探しているものですが、いくつかの不思議な理由でそれはうまくいきません。

期待どおりに動作するように読み取り専用にするために引っ張る必要がある奇妙なトリックはありますか？代わりにJavaScriptで実行する必要がありますか？

ちなみに、他の入力タグでは機能するのに、ラジオボタンでは読み取り専用が機能しない理由を誰かが知っていますか？これは、HTML仕様での理解できない省略の1つですか？

チェックされていないラジオボタンのみを無効にすることにより、ラジオボタンの読み取り専用を偽装しました。これにより、ユーザーは別の値を選択できなくなり、チェックされた値は常に送信時に送信されます。

jQueryを使用して読み取り専用にする：

$(':radio:not(:checked)').attr('disabled', true);

この方法は、選択されていないオプションをそれぞれ無効にする必要があることを除いて、選択リストを読み取り専用にするためにも機能しました。

ラジオボタンは、他のオプションがある場合にのみ読み取り専用にする必要があります。他にオプションがない場合、チェックされているラジオボタンのチェックを外すことはできません。他のオプションがある場合、他のオプションを無効にするだけで、ユーザーが値を変更できないようにすることができます。

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

フィドル：http : //jsfiddle.net/qqVGu/

これはあなたがうまくいくトリックです。

<input type="radio" name="name" onclick="this.checked = false;" />

私はデータベースに投稿する長いフォーム（250以上のフィールド）を持っています。オンライン雇用申請書です。管理者が提出されたアプリケーションを見に行くと、フォームにはデータベースからのデータが入力されます。入力テキストとテキストエリアは送信されたテキストに置き換えられますが、ラジオとチェックボックスはフォーム要素として保持するのに役立ちます。それらを無効にすると、読みにくくなります。.checkedプロパティをfalseに設定すると、ユーザーがアプリに入力することによってチェックされた可能性があるため、onclickは機能しません。とにかく...

onclick="return false;"

ラジオとチェックボックスを無効にするための魅力のように機能します。

最良の解決策は、チェック済みまたは未チェックの状態を（クライアントまたはサーバーから）設定し、ワードの後でユーザーが変更できないようにする（つまり、読み取り専用にする）ことです。

<input type="radio" name="name" onclick="javascript: return false;" />

チェックボックスとラジオボタンの読み取り専用状態を実現するために、JavaScriptを多用した方法を考え出しました。現在のバージョンのFirefox、Opera、Safari、Google Chrome、およびIEの現在および以前のバージョン（IE7まで）に対してテストされています。

単に無効にしたプロパティを使用しないでください。ページを印刷すると、無効な入力要素が灰色で表示されます。これが実装された顧客は、すべての要素が同じ色になることを望んでいました。

会社で働いている間に開発したため、ここにソースコードを投稿できるかどうかはわかりませんが、コンセプトを共有することはできます。

onmousedownイベントでは、クリックアクションが変更する前に選択状態を読み取ることができます。したがって、この情報を保存してから、onclickイベントでこれらの状態を復元します。

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

これのjavascript部分は次のように機能します（ここでも概念のみ）。

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

入力要素のonclickおよびonmousedownプロパティを変更することにより、ラジオボタン/チェックボックスを有効/無効にできるようになりました。

JavaScriptの方法-これでうまくいきました。

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

理由：

1. $('#YourTableId').find('*') ->これはすべてのタグを返します。

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); これでキャプチャされたすべてのオブジェクトを反復処理し、入力タグを無効にします。

分析（デバッグ）：

1. form:radiobutton 内部的には「入力」タグと見なされます。

2. 上記のfunction（）のように、印刷しようとすると document.write(this.tagName);

3. タグでラジオボタンが見つかった場合は常に、入力タグを返します。

したがって、上記のコード行は、*を入力に置き換えることで、ラジオボタンタグに対してさらに最適化できます。 $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

非常に簡単なオプションは、フォームの「onsubmit」イベントで呼び出されるJavaScript関数を作成して、ラジオボタンを有効にし、フォームの残りの部分にその値が送信されるようにすることです。
HTML仕様では省略されていないようですが、デザインの選択（論理的なもの、IMHO）では、ラジオボタンはボタンにできないため、読み取り専用にすることはできません。使用しない場合は、それを無効にします。

使用onclick='this.checked = false;'はある程度うまくいったことがわかりました。クリックされたラジオボタンは選択されません。ただし、既に選択されているラジオボタン（たとえば、デフォルト値）があった場合、そのラジオボタンは選択解除されます。

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

このシナリオでは、デフォルト値をそのままにして他のラジオボタンを無効にすると、すでに選択されているラジオボタンが保持され、選択解除されなくなります。

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

このソリューションは、デフォルト値の変更を防ぐ最も洗練された方法ではありませんが、JavaScriptが有効かどうかに関係なく機能します。

選択されていないラジオボタンについては、無効のフラグを付けます。これにより、ユーザーがユーザー入力に応答したり、チェックされたラジオボタンをクリアしたりできなくなります。例えば：

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>

属性を試してみてくださいdisabled。ただし、ラジオボタンの値は取得できないと思います。または、次のように画像を設定します。

<img src="itischecked.gif" alt="[x]" />radio button option

宜しくお願いします。

チェックボックス/ラジオの入力要素をスタイルするJS プラグインを使用しており、次のjQueryを使用して、基になる値がまだ投稿されているが、入力要素がユーザーにアクセスできないように見える「読み取り専用状態」を確立しています。これは、意図された理由だと思います読み取り専用の入力属性を使用します...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}

JSで「On_click（）」イベントをキャプチャし、ここのようにチェックするのはどうですか？：

http://www.dynamicdrive.com/forums/showthread.php?t=33043