Если предположить, что вы не можете изменять существующий код приложения, то можно использовать MutationObserver
для отслеживания изменений значения атрибута class
.
В вашем случае, код мог бы выглядеть как-то так:
var observer = new MutationObserver(function(mutations) {
mutations.filter(function(mutation) {
return (mutation.type === 'attributes' && mutation.attributeName === 'class');
}).forEach(function(mutation) {
if ($(mutation.target).is('.checked')) {
$('#extra-field').hide();
} else {
$('#extra-field').show();
}
});
});
observer.observe($('#payment').get(0), {attributes: true});
А вот и рабочий пример на JSFiddle.
Замечение:
Не смотря на то, что подход с использованием MutationObserver
вполне работоспособен, я бы использовал его только как "последнее средство". Это слишком уж мощное и не очевидное решение тривиальных задач, вроде вашей.
Вместо этого, я посоветовал бы вам переписать ваш кастомный checkbox так, чтобы он генерировал событие onchange
(или аналогичное). О том, как это сделать, написано в соседнем ответе.
onchange
, который следит за изменениями, а для соответствующего обработчика нужен код, который "тугглит" стиль для отображения элемента (врубает дисплей блок или же убирает в зависимости от того, какое значение у него сейчас).