Почему переключатели не могут быть «только для чтения»?

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

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

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

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

Использование 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;"

работает как брелок для «отключения» радио и чекбоксов ipso facto.

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

<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 элементов ввода.

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

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

Способ 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 внутренне считается тегом «input».

2. Как и в приведенной выше функции (), если вы пытаетесь распечатать document.write(this.tagName);

3. Везде, где в тегах он находит радиокнопки, он возвращает тег ввода.

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

Довольно простой вариант - создать функцию javascript, вызываемую для события «onsubmit» формы, чтобы включить радиокнопку назад, чтобы ее значение было отправлено вместе с остальной частью формы.
Кажется, это не упущение в спецификациях HTML, но выбор дизайна (логичный, ИМХО), радиокнопка не может быть прочитана как кнопка не может быть, если вы не хотите ее использовать, то отключи это.

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

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

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

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

Я использую плагин 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();
    });
}

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

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