Почему радиокнопки не могут быть "readonly"?

Я хотел бы показать радиокнопку, представить ее значение, но в зависимости от обстоятельств, она не редактируется. Отключено не работает, потому что оно не передает значение (или делает это?), И оно выделяет переключатель. Только для чтения - это то, что я ищу, но по какой-то загадочной причине это не работает.

Есть ли какой-то странный трюк, который мне нужно, чтобы заставить работать только для чтения, как ожидалось? Должен ли я просто сделать это в JavaScript вместо этого?

Кстати, кто-нибудь знает, почему только чтение не работает в переключателях, в то время как оно работает в других тегах ввода? Является ли это одним из тех непостижимых упущений в спецификациях HTML?

Ответ 1

Я подделка только для чтения на радиокнопке, отключив только отключенные переключатели. Он не позволяет пользователю выбирать другое значение, и проверенное значение всегда будет отправлять сообщения.

Использование jQuery для чтения только:

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

Этот подход также работал для составления списка выбора только для чтения, за исключением того, что вам нужно отключить каждый не выбранный вариант.

Ответ 2

Радиокнопки должны быть доступны только для чтения, если есть другие варианты. Если у вас нет других опций, отмеченный переключатель не может быть снят. Если у вас есть другие параметры, вы можете запретить пользователю изменять значение, просто отключив другие параметры:

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

Fiddle: http://jsfiddle.net/qqVGu/

Ответ 3

Это трюк, с которым вы можете пойти.

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

Ответ 4

У меня длинная форма (250 + полей), которая помещается в db. Это онлайн-заявка на работу. Когда администратор обращается к заявлению, которое было подано, форма заполняется данными из db. Текст ввода и текстовые поля заменяются текстом, который они отправили, но радио и флажки полезны для сохранения в виде элементов формы. Отключение их затрудняет их чтение. Установка свойства .checked в false onclick не будет работать, потому что они могут быть проверены пользователем, заполняющим приложение. Так или иначе...

onclick="return false;"

работает как прелесть для "отключения" радиостанций и флажков ipso facto.

Ответ 5

Лучшее решение состоит в том, чтобы установить проверенное или непроверенное состояние (либо с клиента, либо с сервера) и не позволять пользователю изменять его после того, как подопечные (т.е. делают его доступным только для чтения) делают следующее:

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

Ответ 6

Я придумал javascript-тяжелый способ добиться состояния readonly для флажков и переключателей. Он протестирован против текущих версий Firefox, Opera, Safari, Google Chrome, а также текущих и предыдущих версий IE (вплоть до IE7).

Почему бы просто не использовать свойство disabled, которое вы спрашиваете? При печати страницы отключенные элементы ввода выделяются серым цветом. Клиент, для которого это было реализовано, потребовал, чтобы все элементы выходили одного цвета.

Я не уверен, что мне разрешено размещать исходный код здесь, так как я разработал это, работая в компании, но я, безусловно, могу поделиться этими концепциями.

С событиями 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 входных элементов.

Ответ 7

JavaScript-метод - это сработало для меня.

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

Причина:

$('#YourTableId').find('*') → возвращает все теги.
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); итерации по всем объектам, захваченным в этом и отключению входных тегов.

Анализ (отладка):

form:radiobutton внутренне рассматривается как тег "input".
Как в приведенной выше функции(), если вы попробуете распечатать document.write(this.tagName);
Где бы он ни находил радиокнопки, он возвращает тег ввода.

Таким образом, над строкой кода можно оптимизировать теги радиокнопок, заменив * на вход: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

Ответ 8

Попробуйте атрибут disabled, но я думаю, что вы не получите значение переключателей. Или установите изображения, например:

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

С наилучшими пожеланиями.

Ответ 9

Довольно простой вариант заключается в создании функции javascript, вызываемой в форме "onsubmit", чтобы включить обратный вызов, чтобы его значение было отправлено с остальной частью формы.

Похоже, что это не упущение в спецификациях HTML, но выбор дизайна (логический, IMHO), радиообъект нельзя читать только, поскольку кнопка не может быть, если вы не хотите ее использовать, тогда отключите его.

Ответ 10

Я обнаружил, что использование 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.

Ответ 11

Для не выбранных переключателей отметьте их как отключенные. Это не позволяет им отвечать на ввод пользователя и очищать установленный переключатель. Например:

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

Ответ 12

Я использую плагин JS, который стилизует элементы checkbox/radio для ввода и использовал следующий jQuery, чтобы установить "состояние только для чтения", в котором базовое значение все еще размещено, но элемент ввода кажется недоступным для пользователя, что, как я полагаю, является предполагаемой причиной мы будем использовать входной атрибут только для чтения...

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

Ответ 13

в init:

pscript = "try{if($(this).attr('readonly')){return false;};}catch(err){};"

Me.Attributes.Add("onclick", pscript)

Gonza

Ответ 14

Как захватить событие "On_click()" в JS и проверить его как здесь?:

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