Как да накарате манипулирането на jquery и отметката/премахването на отметката да работят в IE6?

На следващата страница (вижте кода в края), когато щракна върху квадратчето за отметка „A“, в повечето браузъри, то преминава под хоризонталната линия, без отметка. В IE6 преминава под хоризонталното правило, но остава отметнато. Бих искал да имам същото поведение в IE6 като в другите браузъри. Опитах се да добавя

$(this).attr({"checked":"unchecked"});

но не е по-добре. Някакво решение?

Ето кода на страницата:

<html>
<head>

<title>test check</title>

<script src="shoppinglist_fichiers/jquery-1.js"></script>
<script type="text/javascript">

var toggleItem = function(o, toUnbind, toBind){
    var selector = $(o);
    selector.unbind("click", toUnbind);
    selector.bind("click", toBind);
};

var checkItem = function(){
    toggleItem(this, checkItem, uncheckItem);
    //$(this).attr({"checked":"checked"});
    $("#checked").prepend($(this).parent());
};

var uncheckItem = function(){
    toggleItem(this, uncheckItem, checkItem);
    //$(this).attr({"checked":"unchecked"});
    $("#unchecked").append($(this).parent());
};

$(document).ready(function(){
    $("#checked input").bind("click", uncheckItem);
    $("#unchecked input").bind("click", checkItem);
});

</script>

</head>
<body>
<form id="listForm" action="list" method="post">
<span id="checked">

        <span id="A"> 
        <input autocomplete="off" value="A" name="list" checked="checked" type="checkbox">A<br>
        </span>
</span>
<hr/>
<span id="unchecked">

</span>
</form>

</body>
</html>

jquery internet-explorer-6
person Fabien    schedule 18.12.2009    source източник

Отговори (4)


arrow_upward
2
arrow_downward

В IE6 използвайте свойството defaultChecked.

това трябва да работи

var checkItem = function(){
 toggleItem(this, checkItem, uncheckItem);
 //$(this).attr({"checked":"checked"});
 $(this).attr({"defaultChecked":true});
 $("#checked").prepend($(this).parent());
};

var uncheckItem = function(){
 toggleItem(this, uncheckItem, checkItem);
 //$(this).attr({"checked":"unchecked"});
 $(this).attr({"defaultChecked":false});
 $("#unchecked").append($(this).parent());
};
person Patrick    schedule 18.12.2009

arrow_upward
3
arrow_downward

checked е булев атрибут в XHTML. Докато във вашия XHTML записвате атрибута като checked="checked", javascript излага това свойство като булева стойност element.checked.

Използвайте true или false, за да поставите или премахнете отметката в квадратчето.

$(this).attr('checked', true);  //Check
$(this).attr('checked', false); //Uncheck

Като алтернатива можете също да премахнете атрибута, за да премахнете отметката от квадратчето.

$(this).removeAttr('checked');  //Uncheck

Задаването му на невалидна стойност няма да премахне отметката от квадратчето в IE6 (и честно казано, странно, това е единственият браузър, който отговаря на спецификациите за този аспект. Всеки низ все още е true срещу празен false).

отметнато свойство (INPUT type=чекбокс, INPUT type=radio , HTMLInputElement Constructor)

person Andrew Moore    schedule 18.12.2009
comment
@Andrew Moore, не работи за мен с IE6, работи ли за вас? - person Patrick; 18.12.2009
comment
То е. Имайте предвид, че софтуер като MultipleIE и IETester не възпроизвежда истинските условия на IE6. - person Andrew Moore; 18.12.2009

arrow_upward
0
arrow_downward

Малко ми е трудно да разбера въпроса ви, но за да премахнете отметката от нещо с jQuery, просто използвайте:

$(this).removeAttr('checked');
person Kyle    schedule 18.12.2009

arrow_upward
0
arrow_downward

Това изглежда е грешка в IE6 с квадратче за отметка + фрагмент от документ (фрагментът се използва вътрешно от jQuery, когато правите нещата за добавяне)

Проверете тази страница за описание на цял списък с несъответствия

DOM и квадратче за отметка (маркирано състояние)

Въпреки че все още не съм напълно сигурен защо се случва това, междувременно можете да използвате този workaorund.

var checkItem = function(){
    var ele = $(this).parent().clone(true);
    toggleItem(ele.find("input").get(0), checkItem, uncheckItem);
    ele.prependTo($("#checked"));
    $(this).parent().remove();
};

var uncheckItem = function(){
    var ele = $(this).parent().clone(true);
    toggleItem(ele.find("input").get(0), uncheckItem, checkItem);
    ele.appendTo($("#unchecked"));
    $(this).parent().remove();
};

между другото можете да съкратите кода си (+ да се отървете от toggleItem), ако използвате live

var helper = function(elem, container) {
    var par = $(elem).parent();
    if(container.attr("id") == "unchecked")
        par.clone(true).prependTo(container);
    else
        par.clone(true).appendTo(container);
    par.remove();
}

var checkItem = function(){
    helper(this, $("#checked"));
};

var uncheckItem = function(){
    helper(this, $("#unchecked"));
};

$(document).ready(function(){
    $("#checked input").live("click", uncheckItem);
    $("#unchecked input").live("click", checkItem);
});
person jitter    schedule 18.12.2009