add class using jquery based on class name and an id

Question

I have a form that is validated using validationform.io. There is no out of the box support for Bootstrap select, select fields.

I have this bit of jQuery code that will add the has-success class that adds a green border around the select box and this works fine. But as I'm only finding the .btn-light class it changes anything using that class.

Is there a way to add a CSS selector where class=".btn-light" and data-id="roleId"?

This is my jQuery:

fv.on('core.field.valid', function(field) {   
    if (field === 'roleId') {     
        $('.btn-light').addClass("has-success"); 
    }      
});

This is the html for the select :

<select class="selectpicker show-tick" data-style="btn-light" name="roleId" id="roleId">

this is what the bootstrap-select converts it to when checking in developer tools :

<button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" data-id="roleId" >

imvain2 · Accepted Answer · 2020-07-24 20:25:36Z

3

You can combine the class and data in the selector field:

$('.btn-light[data-id="roleId"]').addClass("has-success");

answered Jul 24, 2020 at 20:25

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

add class using jquery based on class name and an id

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related