IE - скрытый переключатель не проверяется при нажатии на соответствующую метку

Question

Я только что заметил странное поведение в IE7.

У меня есть переключатели со связанными надписями следующим образом:

<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" />
<label for="filter_1">Activities</label>

<input type="radio" name="filter" id="filter_2" value="Services" />
<label for="filter_2">Services</label>

Радиокнопка скрыта с помощью css с отображением: нет или видимость: скрыто (не спрашивайте)

Проблема в том, что когда я нажимаю на ярлык в IE7 (еще не смотрел другие версии IE), соответствующая кнопка-переключатель фактически не проверяется. Я подтвердил это с помощью jquery - событие нажатия ярлыка сработало, а событие щелчка переключателя - нет. Сообщение формы также подтверждает, что установленный переключатель не изменяется.

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

Это ошибка IE или я что-то упустил?

Answer 1

Вероятно, это связано с display: none - вы также можете обнаружить, что скрытые элементы не получают свои значения, отправленные с остальной частью формы. Если у вас есть контроль над ним, вы можете попробовать расположить элементы вне экрана, а не скрывать их .

Answer 2

Это вики-ответ, объединяющий все разные ответы и варианты.

Вариант 1: Переместить элемент за экран вместо полного его скрытия

position: absolute;
top: -50px;
left: -50px;

Вариант 2: Используйте немного JavaScript, чтобы установить переключатель, отмеченный при нажатии метки

$("label").click(function(e){
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});

Вариант 3: Установить ширину и / или непрозрачность элемента равными нулю

width: 0;
/* and/or */
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
outline:none; /* this prevents IE8 from having the line around it even though it's invisible */

Вариант 4: Использовать другой браузер:)

По сути, в спецификации для этих вещей конкретно не указано, какое поведение использовать, но IE, как правило, придерживается позиции, что если его не видно, то он не работает. «Видеть» и «работать» могут означать разные вещи, но в этом случае это означает, что когда установлена ​​display:none, метка не активирует переключатель, что приводит к обычным обходным решениям, необходимым для столь многих вещей в IE.

Answer 3

Это работает для меня

width: 0px;

Протестировано в IE7 и IE8. Чистый CSS без JavaScript.

Answer 4

Эта проблема существует в IE6, 7, 8 и даже в текущей бета-версии 9. Как исправление, расположение переключателя вне экрана - хорошая идея.

Вот альтернатива, которая не должна включать дизайнера или CSS: Обычно скрывайте кнопку, и любая функция, обрабатывающая событие нажатия кнопки, также обрабатывает событие нажатия для метки.

Answer 5

$("label").click(function(e){
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});

Спасибо Лейн за это. Я добавляю это как ответ здесь, чтобы люди не пропустили ваш комментарий.

Answer 6

Вот хорошая подборка Ваших предложений:

input {
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
position: absolute;
}

вместо:

display: none;

Answer 7

Вы можете попробовать это для IE7,8:

input{
    position: absolute;
    z-index: -1;
}

вместо

input{
    display: none;
}

Answer 8

Заменить

style="display:none;"

с

style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"

Answer 9

Я использовал функцию jQuery hide(), поэтому было нелегко изменить способ скрытия элемента без написания более сложного кода. Я нашел эту идею: Я использую класс, чтобы сохранить проверенный атрибут и снова установить этот атрибут перед отправкой.

if ($.browser.msie && $.browser.version == 7.0) {
$('input[type=radio]').click(function() {
    $('input[name="'+$(this).attr("name")+'"]').each(function(){
        if ($(this).attr("checked")){
            $(this).addClass("checked");
        }else{
            $(this).removeClass("checked");
        }
    });
});
$('form').submit(function(){
    $('input.checked').each(function(){
        $(this).attr("checked","true");
    });
});
}

В моем случае это работает как шарм.