CODEWITHSUNDEEP
javascripthtmlcss
Manish Verma
Manish Verma

Reputation: 469

How to prevent CSS/JavaScript on specific selectors using Id?

I am using this JavaScript to add CSS class on radio buttons and checkbox in my code.

    $('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_flat-blue'
    });
    $('input[type="radio"]').iCheck({
        radioClass: 'iradio_flat-blue'
    });

I am following layout and content phenomenon in my HTML pages in other words I have one layout.html which contains all the sections and divisions which are similar in all pages and I use this layout in my content.html pages to render content.

|----------------------|                      |----------------------|
|   Header             |                      |   Header             |
|======================|                      |======================|
|                      |                      |                      |
|                      |                      |                      |
|     Content 1        |                      |    Content xyz       |
|                      |                      |                      |
|                      |                      |                      |
|======================|                      |======================|   
| footer               |<-----Layout--------->| footer               | 
|----------------------|                      |----------------------|

All CSS and Scripts are in layout as I am using them in almost every content page. My content pages contain HTML input fields like text, radio etc. The above script is in layout file which adds CSS class in radio buttons and check-boxes in my content pages. But their are certain places in the same content page where I don't want this script to work on my input fields. I want to prevent this script on two radio buttons in the same content page where it is being used on other radio buttons. Is there any way to do this by giving an id to them?

Upvotes: 2

Views: 79

Answers (2)

Ricardo Pontual
Ricardo Pontual

Reputation: 3757

You can set a class in the input radio you don't want to change:

<input type="radio" class="not-apply" />

And use the :not operation in the jQuery selector to exclude that class:

$('input[type="checkbox"]:not(.not-apply)')

Upvotes: 3

Neo
Neo

Reputation: 3399

If you are not using jQuery, and only pure javascript and css you can use this syntax

document.querySelectorAll('span.test:not(.asd)');

CSS NOT

Upvotes: 3

Related Questions