2015-03-05 2 views
2

этот простой фрагмент кода отлично работает в jquery 1.8.3 однако> jquery 1.8.3 он перестает работать. Что я делаю неправильно?Ошибка jQuery с версией с флажками

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#button').click(function(){ 
     if($("#stc").is(':checked')) 
     { 
      $("#stc").attr('checked', false); 
      //do some code 
     } 
     else 
     { 
      $("#stc").attr('checked', true); 
      //do some other code 
      //so no toggle() I believe 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
<button id="button">(de)select</button> 
<input type="checkbox" id="stc"> 
</body> 
</html> 

попробовать для себя с 1.8.3:

ответ

3

Используйте prop()

if($("#stc").is(':checked')) { 
      $(this).prop('checked', false); 
      //do some code 
     } else { 
      $(this).prop('checked', true);   
     } 
1

Вместо

$("#stc").attr('checked', false); 

Использование .prop()

$("#stc").prop('checked', false); 

Полный код: -

$(document).ready(function() { 
    $('#button').click(function(){ 
     if($("#stc").is(':checked')) 
     { 
      $("#stc").prop('checked', false);//Or $("#stc").removeAttr('checked'); 
      //do some code 
     } 
     else 
     { 
      $("#stc").prop('checked', true);//Or $("#stc").attr('checked','checked'); 
      //do some other code 
      //so no toggle() I believe 
     } 
    }); 
}); 
2

Попробуйте

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function() { 
 
    $('#button').click(function(){ 
 
     if($("#stc").is(':checked')) 
 
     { 
 
      $("#stc").prop('checked', false); 
 
      //do some code 
 
     } 
 
     else 
 
     { 
 
      $("#stc").prop('checked', true); 
 
      //do some other code 
 
      //so no toggle() I believe 
 
     } 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<button id="button">(de)select</button> 
 
<input type="checkbox" id="stc"> 
 
</body> 
 
</html>

2

Что я делаю неправильно?

Из документов из .attr():

Для того, чтобы получать и изменять свойства DOM, такие как проверено, выбранного или выключенное состояние элементов формы, использовать метод .prop().

Атрибуты против Свойства
Разница между атрибутами и свойствами может быть важным в конкретных ситуациях. Перед jQuery 1.6 метод .attr() иногда учитывал значения свойств при извлечении некоторых атрибутов, что может привести к непоследовательному поведению. Начиная с jQuery 1.6, метод .prop() предоставляет способ явного извлечения значений свойств, в то время как .attr() извлекает атрибуты.

Например, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected должны быть восстановлены и заданы с помощью метода .prop(). До jQuery 1.6 эти свойства были восстановлены с помощью метода .attr(), но это не было в пределах attr. Они не имеют соответствующих атрибутов и являются только свойствами.

Я предлагаю вам использовать .prop() вместо этого, вам не требуется использовать какие-либо if/else состояние. Вы просто должны проверить проверенное свойство флажка:

$(document).ready(function() { 
 
     $('#button').click(function() { 
 
     $("#stc").prop('checked', !$("#stc")[0].checked); 
 
     }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="button">(de)select</button> 
 
<input type="checkbox" id="stc">

Смежные вопросы