JavaScript - Если флажок отключен, добавьте класс, используя jQuery

Question

У меня возникла проблема с синтаксисом (или, возможно, с селекторами) в моем коде. См. demo.

Я пробовал следующий код, но результаты ничего не делают.

# 1. hasAttribute():

if ($('input[type=checkbox]').hasAttribute("disabled")) { 
    $(this).closest('.chkbox').addClass("is-disabled"); 
} 

# 2. есть():

if ($('input[type=checkbox]').is("[disabled]")) { 
    $(this).closest('.chkbox').addClass("is-disabled"); 
} 
// ------------------------------------------------ 
if ($('input[type=checkbox]').is(":disabled")) { 
    $(this).closest('.chkbox').addClass("is-disabled"); 
} 

# 3. проп():

if ($('input[type=checkbox]').prop("disabled", true)) { 
    $(this).closest('.chkbox').addClass("is-disabled"); 
} 

Итак, я думаю, что проблема находится на линии:

$(this).closest('.chkbox').addClass("is-disabled"); 

Любая идея?

Спасибо.

Answer 1

Вы используете $(this) без объявления ничего. По этой причине он не работает. Он работает во втором примере, потому что функция .change() дает контекст «вещи» (этого), который меняется.

Этот код должен работать по вашему желанию.

$(function() { 

    // Grab all inputs with the type checkbox. 
    var input = $('input[type=checkbox]') 

    // Check for each of the input fields (i, el stands for index, element) 
    input.each(function(i, el) { 
    // Does it have the attribute disabled? 
    if(el.hasAttribute('disabled')) { 
     // Add the class 'is-disabled' 
     $(el).closest('.chkbox').addClass('is-disabled') 
    } 
    }) 

    $('input[type=checkbox]').change(function(){ 
    if ($(this).is(":checked")) { 
     $(this).closest('.chkbox').addClass("is-checked"); 
    } else { 
     $(this).closest('.chkbox').removeClass("is-checked"); 
    } 
    }); 
}); 

Answer 2

Вы можете использовать: Отключено селектор

see here