web-dev-qa-db-ja.com

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

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

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

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

htmlradio-buttonreadonly
188
mcv

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

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

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

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

110
Megan

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

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

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

193
Sampson

これはあなたが行くことができるトリックです。

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

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

onclick="return false;"

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

10
humbolight

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

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

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); });

2
user3702798

チェックボックスとラジオボタンの読み取り専用状態を実現するために、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プロパティを変更することで、ラジオボタン/チェックボックスを有効/無効にできるようになりました。

2
Tom

onclick='this.checked = false;'を使用すると、ある程度機能することがわかりました。クリックされたラジオボタンは選択されません。ただし、alreadyが選択されたラジオボタン（デフォルト値など）がある場合、そのラジオボタンは選択されなくなります。

<!-- 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が有効になっているかどうかにかかわらず機能します。

1
JW8

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

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

宜しくお願いします。

1
Tim

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

1
wintermute

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

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

私はJSを使用しています plugin チェックボックス/ラジオ入力要素をスタイルし、次のjQueryを使用して「読み取り専用状態」を確立します。これは、読み取り専用の入力属性を使用する意図した理由だと思います...

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