243

ラジオボタンを表示して、その値を送信したいのですが、場合によっては編集できないようにします。Disabled は機能しません。値を送信しない (または送信する?) ためであり、ラジオ ボタンがグレー表示されます。読み取り専用は本当に私が探しているものですが、不思議な理由で機能しません。

読み取り専用を期待どおりに機能させるために引っ張る必要がある奇妙なトリックはありますか? 代わりにJavaScriptでやるべきですか？

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

4

16 に答える 16

229

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

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

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

于 2009-12-23T14:12:32.147 に答える
174

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

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

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

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

于 2011-03-25T20:40:52.160 に答える
25

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

<input type="radio" name="name" onclick="this.checked = false;" />
于 2009-12-23T14:13:26.777 に答える
16

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

onclick="return false;"

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

于 2012-10-16T18:27:23.800 に答える
9

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

<input type="radio" name="name" onclick="javascript: return false;" />
于 2011-06-10T14:18:03.767 に答える
2

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

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

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

オンマウスダウンイベントを使用すると、クリックアクションによって選択状態が変更される前に、選択状態を読み取ることができます。したがって、この情報を保存してから、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プロパティを変更することにより、ラジオボタン/チェックボックスを有効/無効にできるようになりました。

于 2011-09-15T09:19:31.520 に答える
2

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. タグ内でラジオ ボタンが見つかった場合は常に、input タグを返します。

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

于 2014-06-03T11:26:24.137 に答える
2

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

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
于 2013-05-15T23:26:35.727 に答える
1

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 が有効になっているかどうかに関係なく機能します。

于 2011-11-02T23:16:39.440 に答える
1

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

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

よろしくお願いします。

于 2009-12-23T14:15:48.440 に答える
0

https://stackoverflow.com/a/71086058/18183749からの抜粋

「無効」属性を使用できず (POST で値の入力が消去されるため)、HTML 属性「読み取り専用」がテキストエリアと一部の入力 (テキスト、パスワード、検索、私が見た限りでは) でのみ機能することに気付いた場合)、そして最後に、すべての選択、チェックボックス、ラジオを非表示の入力で複製することに煩わされたくない場合は、次の関数または好みに合わせて彼の内部ロジックのいずれかを見つけることができます。

addReadOnlyToFormElements = function (idElement) {
    // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
    $('#' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',true); 

    // and, on the selected ones, mimic readonly appearance
    $('#' + idElement + ' input[type="radio"]:checked').css('opacity','0.5');
}

そして、これらの読み取り専用を削除することほど簡単なことはありません

removeReadOnlyFromFormElements = function (idElement) {
    // Remove the disabled attribut on non-selected
    $('#' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',false); 
 
    // Remove readonly appearance on selected ones
    $('#' + idElement + ' input[type="radio"]:checked').css('opacity','');
}
于 2022-02-11T23:23:56.067 に答える
-2

JS で "On_click()" イベントをキャプチャして、次のようにチェックするのはどうですか?:

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

于 2009-12-23T14:16:20.857 に答える