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


214

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

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

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


5
«Это одно из тех непонятных упущений в спецификациях HTML?» Подумайте об этом с точки зрения пользователя. Зачем отображать кнопку, которую они не могут нажать?
Пол Д. Уэйт

67
Зачем отображать кнопку, которую они не могут нажать? Потому что я хочу, чтобы они знали, что кнопка есть, но я не хочу, чтобы они могли нажать ее прямо сейчас. Но возможно позже. В конце концов, это динамическая форма. Почему переключатель может отличаться от любого другого поля ввода?
MCV

7
Вот спецификация: w3.org/TR/html401/interact/forms.html#h-17.12.2 «Следующие элементы поддерживают атрибут readonly: INPUT и TEXTAREA.» Что явно не так. Однако здесь мы видим более точное резюме: w3.org/TR/WD-forms-970402#readonly «READONLY применяется к элементам INPUT типа TEXT или PASSWORD и к элементу TEXTAREA». Похоже, что это проскользнуло между пробелами recs и specs.
graphicdivine

Еще более любопытно. Согласно этому древнему документу «Например, в флажках вы можете включить или отключить их (таким образом, устанавливая состояние CHECKED), но не изменяете значение поля». ( htmlcodetutorial.com/forms/_INPUT_DISABLED.html ) Это правда? Блокирует ли установка READONLY флажок / радио, хотя пользователь может изменить его?
graphicdivine

проверьте мой пост [здесь] [1] дает чистое простое решение проблемы [1]: stackoverflow.com/a/15513256/1861389
driven4ward

Ответы:


149

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

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

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

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


2
Спасибо @Megan, это отличное решение
Michael La Voie

9
Вариант этого позволяет вам использовать readonlyсвойство, так как ОП ожидало, что оно будет работать:$(':radio[readonly]:not(:checked)').attr('disabled', true);
wodow

1
Среди приведенных ниже решений это решение обеспечивает самый чистый код и хорошо работает с валидатором Jquery, поскольку мне не нужно включать / отключать поля или заниматься отменой привязки событий щелчка и повторной привязки их при отправке формы.
Кристиан Нерона

Работает точно. Спасибо
Хасан Фарук

Умная! Используя .not (..), если у вас уже есть набор выбранных полей ввода: var myRadios = $ ('# specific-radios'); myRadios.not ( ': проверено') проп ( 'отключено', правда);. api.jquery.com/not
JoePC

207

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

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

Скрипка: http://jsfiddle.net/qqVGu/


3
Проблема с вашим первым решением состоит в том, что, если я хочу включить радиокнопку через javascript, у меня внезапно появляются два поля с одинаковым именем, поэтому мне нужно очистить одно из них. Или используйте скрытый по-настоящему, и переключатель должен просто установить значение скрытого поля. Эфирный путь, это просто немного более громоздко, чем я бы хотел, чтобы радио-кнопка была. Ваше второе решение, хотя я не сомневаюсь, что оно работает, звучит как действительно уродливый хак. Поэтому я думаю, что решение javascript - единственное, которое соответствует моим критериям. Я пойду с этим.
MCV

7
Решение 1, пожалуйста! Это единственный правильно доступный. И если вам нужно написать его, это всего лишь еще одна строка, чтобы установить включение скрытого поля в противоположность включению радио.
bobince

5
Я только что заметил, что решения 2 и 3 поменялись местами в ответе Джонатана, так что теперь комментарии, похоже, не имеют особого смысла.
MCV

1
Хочу заметить, что решение Javascript не работает, оно просто снимает галочку с кнопки. Я полагаю, что это должно быть, onclick="return false"чтобы предотвратить изменения.
Дмитрий

2
Когда я устанавливаю радио «отключено», я добавляю «стиль = курсор: по умолчанию», чтобы удалить «отключенный курсор».
Жоао Пауло

24

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

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

4
Именно то, что я думал, хотя было бы лучше, если бы вы пояснили, что это должно быть onClick="this.checked = <%=value%>"какое-то разнообразие :)
JustLoren

это приятно знать. флажок может иметь значения true или false.
Сарфраз

Просто предупреждение, что это не будет работать для тех из нас, кто просматривает с javascript, не включенным по умолчанию.
tloach

3
Не проблема для моего случая. Мы уже используем тонны jQuery и Ajax.
MCV

1
Стоит отметить, что вы можете просто сделать так, onclick="return false;"чтобы значение
Зак

12

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

onclick="return false;"

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


8

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

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

нет! в этом случае пользователь может редактировать HTML в браузере, пометить нужную опцию как выбранную и опубликовать форму.
ошибка 1009

2

Я придумал способ с использованием 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

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

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

4
checked="yes"? Что это за спецификация? Либо используйте, checked="checked"либо просто атрибут checkedбез значения. То же самое для disabled.
Робин ван Баален

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

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

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

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


1

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


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.


1

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

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

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


1
о, мой HTML-код был удален: img src = "itIsChecked.gif" alt = "[x]" OptionChecked
Тим

0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.