Как «заблокировать» радиокнопки, флажки и меню <select>, не отключая их?

Question

У меня есть форма, которую я хочу представить в двух состояниях:

1) Нормальная форма

2) Человек может посмотреть на форму, заполненную пользователем, но не может ничего изменить

Легко обрабатывать ввод текста с помощью свойства readonly, но переключатели, флажки и раскрывающиеся меню не используют его. Я могу установить для них свойство «отключено», но в большинстве браузеров они отображаются серым цветом и едва различимы. Что я действительно хочу, так это чтобы они выглядели как обычные формы, но были бы неприкосновенны, как отключенный элемент. Есть ли способ переопределить нормальный «отключенный» вид? Или это решение отключить их окольным путем обработки кликов?

Я использую jQuery для большинства этих вещей, если это имеет значение ...

Answer 1

ну, вы можете попробовать такие хаки, как этот ...

​$(':radio:disabled').removeAttr('disabled').click(function(){
    this.checked=false;
})​;

это выберет все отключенные переключатели и включит их, но при нажатии не будет проверено ...

демо

и <select>

вы можете сделать, как,

$('select:disabled').removeAttr('disabled').change(function(){
    $(this).find('option').removeAttr('selected');
    // this.value = this.defaultValue; // you may also try this..
});

Answer 2

Предложение, скорее ответ: вы можете связать событие с изменением состояния элемента и отменить изменение.

Вы можете сделать это так же, как инструменты проверки, которые позволяют вводить только цифры или только некоторые символы в поля <input type="text" />. См. Сообщение StackOverflow об этом.

Другое решение - поставить что-то перед вашим контролем. Например:

<div style="position:absolute;width:200px;height:200px;"></div>
<input type="radio" />

сделает вашу кнопку радио неактивной. Проблема в том, что это не позволит пользователям копировать-вставлять текст или использовать гиперссылки, если <div/> охватывает всю страницу. Вы можете «покрывать» каждый элемент управления один за другим, но это может быть довольно сложно сделать.

Answer 3

Просто замените их собственной более управляемой конструкцией HTML / CSS, как Niceforms , и др. (с атрибутом disabled или readonly, в зависимости от ситуации, как запасной вариант).