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


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

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

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

13 174

13 ответов:

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

используя 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.

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

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

Я придумал javascript-тяжелый способ достижения состояния только для чтения для флажков и переключателей. Он протестирован против текущих версий 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 входных элементов.

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

<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. везде, где в тегах он находит переключатели, он возвращает входной тег.

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

довольно простой вариант-создать функцию javascript, вызываемую в событии формы "onsubmit", чтобы включить radiobutton обратно, чтобы его значение было опубликовано с остальной частью формы.
Это не кажется упущением в спецификациях HTML, но выбор дизайна (логический, IMHO), radiobutton не может быть прочитан только как кнопка, если вы не хотите ее использовать, а затем отключите ее.

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

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

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

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

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

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

on init:

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

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

Гонза

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

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