Adding class to parent element where sub-child element input value is empty?

Question

When clicking on button #btn-modal-clear I would like to select and add a class to the li where it's sub-child input is empty (value=""). How do I do this?

html:

<li>...<li> 
<li>
    <a class="myCheckboxLink" tabindex="0">
        <span class="myCheckboxSpan">
            <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
        </span>
        <label class="radio">
            <input value="" type="radio">Name
        </label>
    </a>
</li>
<li>...<li>

js:

$('#btn-modal-clear').on('click', function() {  
    $('.select-name').multiselect('select', ['']);
    $('.select-name').multiselect('updateButtonText');

    ... .addClass("active"); 

});

So result should be:

html:

<li>...<li> 
<li class="active">
    <a class="myCheckboxLink" tabindex="0">
        <span class="myCheckboxSpan">
            <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
        </span>
        <label class="radio">
            <input value="" type="radio">Name
        </label>
    </a>
</li>
<li>...<li>

Fiddle: https://jsfiddle.net/ewm9pbqv/

Milind Anantwar · Accepted Answer · 2018-05-09 13:45:30Z

1

You can use .filter() with .addClass() in this case:

$('li').filter(function() { 
   return $(this).find('input:radio').val() == ""; 
}).addClass('active');

answered May 9, 2018 at 13:45

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philipp M Over a year ago

Unfortunately it does not seem to work. Please check it out: jsfiddle.net/ewm9pbqv

kiranvj · Accepted Answer · 2018-05-09 14:18:55Z

1

Try this

$('li input[value=""]').closest("li").addClass('active');

edited May 9, 2018 at 14:18

answered May 9, 2018 at 14:14

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Collectives™ on Stack Overflow

Adding class to parent element where sub-child element input value is empty?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related