Почему браузер перестает показывать обновления флажка?

Question

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

http://jsfiddle.net/phinor/qj7uj3rc/

Это отношение JavaScript:

$(document).ready (function() { 
    $('.lessoncount').on ('click', tickAlike); 
}); 

function tickAlike() 
{ 
    var classes = $(this).attr('data-classes'); 

    if ($(this).siblings ('.tick_' + classes).attr ('checked')) 
    { 
     console.log ('ticking'); 
     $('.tick_' + classes).removeAttr ('checked'); 
    } 
    else 
    { 
     console.log ('unticking'); 
     $('.tick_' + classes).attr ('checked', true); 
    } 
} 

Идея заключается в том, что флажки могут быть индивидуально выбранный или, если нажата «метка», все флажки с тем же классом будут выбраны или отменены, чтобы соответствовать прямоугольнику рядом с ним. Поскольку я хочу два возможных поведения в зависимости от того, нажимают ли они на поле или ярлык, я не могу использовать тег <label>. Как следует из этого, из-за независимого отбора «переключение» нецелесообразно.

Это, похоже, работает в течение одного цикла «тиков» и «отказ», а затем останавливается. Если я осмотрю элемент флажка в Chrome, я вижу, что атрибут «checked» добавляется и удаляется соответствующим образом, но просмотр браузера больше не обновляется, и тики не отображаются.

Это соответствует последним версиям Chrome, Firefox и IE, поэтому я предполагаю, что я делаю что-то неправильно!

Answer 1

Вы должны использовать .prop() вместо .attr() при изменении логических атрибутов, например, checked, disabled, readonly, selected и т. Д. Использование .removeAttr() или .removeProp() приведет к тому, что атрибут будет удален навсегда и не может быть дополнительно обработан. Чтобы понять разницу между .prop() и .attr(), на самом деле есть a very good question (with a well-structured answer) asked on SO before.

Чтобы программно установить флажок, просто используйте $selector.prop('checked',true). Чтобы снять флажок, используйте $selector.prop('checked',false).

Кроме того, чтобы проверить, установлен ли флажок (нет каламбур), вы можете использовать способ .is(), то есть $selector.is(':checked').

---

$(document).ready(function() { 
    $('.lessoncount').on('click', tickAlike); 
}); 

function tickAlike() 
{ 
    var classes = $(this).attr('data-classes'); 
    if ($(this).siblings('.tick_' + classes).is(':checked')) 
    { 
     console.log('ticking'); 
     $('.tick_' + classes).prop('checked', false); 
    } 
    else 
    { 
     console.log('unticking'); 
     $('.tick_' + classes).prop('checked', true); 
    } 
} 

рабочей демонстрация: http://jsfiddle.net/teddyrised/qj7uj3rc/5/

---

Еще лучше: Я могу видеть, что <span> элемента, содержащего описание каждого флажок семантический помешался от сопровождающего его флажка, т.е. нет способа дать контекст каждому флажку. Для этой цели создается элемент <label>.

Вы можете все еще хотите, чтобы стиль дескрипторов самостоятельно, так что мы можем держать их заворачивают в <span>, но мы можем обернуть все содержимое внутри каждого <td> с <label> элемента, так что при нажатии на оба текста и в флажок вызывает тот же ответ.

пересмотренная разметки для строк в теле таблицы будет выглядеть примерно так:

<tr> 
    <td>1-Mo</td> 
    <td><label for="lesson_1_1"><input type="checkbox" name="lesson[1][1]" value="1" id="lesson_1_1" class="tick_1645_1646_1647_1648_1649_1650_2024"/> <span data-classes="1645_1646_1647_1648_1649_1650_2024" class="lessoncount">(7)</span></label></td> 
    <td><label for="lesson_1_2"><input type="checkbox" name="lesson[1][2]" value="1" id="lesson_1_2" class="tick_1582_1583_1584_1585_1586_1587"/> <span data-classes="1582_1583_1584_1585_1586_1587" class="lessoncount">(6)</span></label></td> 
    <td><label for="lesson_1_3"><input type="checkbox" name="lesson[1][3]" value="1" id="lesson_1_3" class="tick_1658_1673_1684_1700_1706_1736_1737_1769"/> <span data-classes="1658_1673_1684_1700_1706_1736_1737_1769" class="lessoncount">(8)</span></label></td> 
    <td><label for="lesson_1_4"><input type="checkbox" name="lesson[1][4]" value="1" id="lesson_1_4" class="tick_1602_1603_1604_1605_1618_1628"/> <span data-classes="1602_1603_1604_1605_1618_1628" class="lessoncount">(6)</span></label></td> 
    <td><label for="lesson_1_5"><input type="checkbox" name="lesson[1][5]" value="1" id="lesson_1_5" class="tick_"/> <span>(0)</span></label></td> 
    <td><label for="lesson_1_6"><input type="checkbox" name="lesson[1][6]" value="1" id="lesson_1_6" class="tick_1659_1674_1701_1738_1755_1756"/> <span data-classes="1659_1674_1701_1738_1755_1756" class="lessoncount">(6)</span></label></td> 
    <td><label for="lesson_1_7"><input type="checkbox" name="lesson[1][7]" value="1" id="lesson_1_7" class="tick_1719_1720_1721_1722_1723_2003"/> <span data-classes="1719_1720_1721_1722_1723_2003" class="lessoncount">(6)</span></label></td> 
    <td>detail | clear</td> 
    </tr> 

С немного измененным скриптом для прослушивания щелчку даже на оберточной <label> элемента вместо текстового диапазона:

$(document).ready(function() { 
    $('table tbody label').on('click', tickAlike); 
}); 

function tickAlike() 
{ 
    var classes = $(this).find('span.lessoncount').attr('data-classes'); 
    if ($(this).find('input[type="checkbox"]').is(':checked')) 
    { 
     console.log('ticking'); 
     $('.tick_' + classes).prop('checked', false); 
    } 
    else 
    { 
     console.log('unticking'); 
     $('.tick_' + classes).prop('checked', true); 
    } 
} 

Смотреть альтернативную рабочую демо: http://jsfiddle.net/teddyrised/pb68gk2n/

Answer 2

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

$(".lessoncount").live("click", function() { 
    tickAlike(); 
}); 

Answer 3

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

Здесь обновляется и упрощены код:

$(document).ready(function() { 
    $('.lessoncount').on('click', tickAlike); 
}); 

function tickAlike() { 
    var classes = $(this).data('classes'); 
    var $checkbox = $(this).siblings('.tick_' + classes).click(); 
    $('.tick_' + classes).prop('checked', $checkbox.is(':checked')); 
} 

Демо:http://jsfiddle.net/qj7uj3rc/6/

Однако это еще не идеальна: обратите внимание, как нажав на флажок сам ничего не делает. Поэтому его можно улучшить. Вы должны использовать label вместо span и обернуть флажки в эти метки. Так HTML должен быть таким:

<label data-classes="1645_1646_1647_1648_1649_1650_2024" class="lessoncount"> 
    <input type="checkbox" name="lesson[1][1]" value="1" id="lesson_1_1" class="tick_1645_1646_1647_1648_1649_1650_2024" /> (7) 
</label> 

и после этого связывает OnChange события в флажках вместо пролетов:

$(document).ready(function() { 
    $('.lessoncount :checkbox').on('change', tickAlike); 
}); 

function tickAlike() { 
    var classes = $(this).parent().data('classes'); 
    $('.tick_' + classes).not(this).prop('checked', this.checked); 
} 

Answer 4

Использовать «(„: проверено“)» для условного и использовать».prop («checked», «false») и «.prop (« checked », true)», чтобы внести изменения в ввод проверки.

Вот ссылка https://jsfiddle.net/qj7uj3rc/7/

if ($(this).siblings ('.tick_' + classes).is(':checked')) 
{ 
    console.log ('ticking'); 
    $('.tick_' + classes).prop ('checked', false); 
} 
else 
{ 
    console.log ('unticking'); 
    $('.tick_' + classes).prop ('checked', true); 
}