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


Tags: javascript,html,css

Problem :

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?



Solution :

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:

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

    CSS Howto..

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    How to change CSS id property depending upon screen size

    AngularJS - how to refactoring a CSS code style

    How to avoid text go below the thumbnail with css

    How to avoid background image stretched horizontally with CSS?

    Generated web font doesn't show dots above Ü

    Selenium IDE: How to check text color using CSS

    How do I light up an entire single row by hovering on a span in one of the columns?

    How to override HTML with CSS

    How to make my container grow accordingly to its containers inside him?

    How to get Style From jQuery in angular2

    How to change the current link color in navigation bar

    How to make last element of second level of menu to drop up?

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to change css on link current class

    jQuery How do i apply CSS to selected text

    How to style using nth-of-type within a ul tag?

    How to place an image between horizontal list items

    How to properly adjust CSS Form Select field if content is larger than image

    How does the DiggBar work?

    JQuery/CSS - How i can set imagem full size of div

    Showing only one row of items with css independently of users resolution?

    How to apply CSS on texte label beside an input?

    How to have a centered layout with border (background-image), and footer sticked to the bottom?

    How to keep indent for second line in ordered lists via CSS?

    How to select XML element by xlink:href attribute with CSS?

    How to select inner div in an unordered list

    How to use nth-child with only direct children?

    How to overlay a form field over an image with a fixed width?

    CSS3 Menu Layout and Gradient not showing