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

Я только заметил странное поведение в 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 или что-то мне не хватает?

Ответ 1

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

Ответ 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 invisible */

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

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

Ответ 3

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

Здесь альтернатива, которая не должна включать конструктор или css: Скрыть кнопку в обычном режиме и сделать любую функцию обработкой события click для кнопки также обработать событие click для метки.

Ответ 4

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

width: 0px;

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

Ответ 5

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

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

Ответ 6

Заменить

style="display:none;"

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

Ответ 7

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

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

вместо

input{
    display: none;
}

Ответ 8

Есть хорошая компиляция ваших предложений:

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

вместо:

display: none;

Ответ 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");
    });
});
}

Он работает как прелесть в моем случае.