Checkbox неоднозначное поведение

Question

Приложение включает в себя JQuery 1.9.1, undescore.js и jQuery plagin dataTables.

Мои флажков обернуты следующим образом:

<label style="top: 3px; position: relative;" class="checkbox" id="IsSpreadCheckBox"> 
    <input type="checkbox" name="IsSpread" id="IsSpread"> 
    <span></span> 
</label> 

Элемент label.checkbox SPAN имеет фоновые изображения для каждого случая: установлен, снят с ограниченными физическими возможностями.

Jquery OnClick обработчик для него:

$(".checkbox span").click(function() { 
    var backgroundContainer = $(this); //span with background image 
    var checkbox = backgroundContainer.parent().find("input[type='checkbox']"); //hidden checkbox itself 

    if (!backgroundContainer.hasClass("disabled")) { 
     if (backgroundContainer.hasClass("checked")) { 
      checkbox.removeAttr('checked').prop("checked", false); 
      //Also tried checkbox.removeAttr('checked') or checkbox.prop("checked", false); 

      backgroundContainer.removeClass("checked"); 
     } 
     else { 
      checkbox.attr('checked', 'checked').prop("checked", true); 
      //checkbox.attr('checked', 'checked') or checkbox.prop("checked", true); 

      backgroundContainer.addClass("checked"); 
     } 
    } 
}); 

Также у меня есть некоторый код для создания этого элемента отключена после загрузки страницы, если это необходимо.

В то время как отладка, которая работает и скрытый элемент флажка, проверяется или снята флажком (также верно изображение флажка). Кроме того, что хорошо работает в целевом браузере IE 10 (на стороне сервера принимает правильное значение флажок), но в моем FireFox 29 с FireBug при отладке на подчиненной формы я вижу:

$("#IsSpread").attr("checked") // checked 
$("#IsSpread").prop("checked") // false 

и сервера всегда принимает false.

Отладка об изменении атрибута для этого элемента ничего не дает.

Если программно делает его проверить на $ (документ) .ready() всегда посылает истинное состояние.

Спасибо!

Answer 1

Fiddle с помощью .attr():

if (backgroundContainer.hasClass("checked")) 
{ 
    checkbox.removeAttr('checked'); 
} 
else 
{ 
    checkbox.attr('checked', 'checked'); 
} 

и позже:

$('#send').click(function() 
{ 
    var checked = $('#IsSpread').attr("checked") == "checked"; 
    alert("Sending " + checked); 
}); 

Fiddle с помощью .prop() (на самом деле это странное поведение, но работает для меня):

checkbox.prop('checked', checkbox.prop('checked')); 

и позже :

$('#send').click(function() 
{ 
    var checked = $('#IsSpread').prop("checked"); 
    alert("Sending " + checked); 
});