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 can I align a text that has a specific width at the center of a div?

    How to animate text with css font-weight property in jQuery ? normal to bold

    How to get divs and anchors stacked on top of each other with the same width

    How to make html elements fire effects on other elements using css

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How do I increase the width and font-size of my twitter feed widget?

    How can I align my HTML components with CSS?

    How do I style the scrollbar of a textarea

    jQuery / CSS: How to add page breaks dynamically

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How to remove vertical scrollbar from iframe inside the page

    How to set backgroundImage property in css file in flex 4?

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How can I customize COUNT nodes with css

    How to create directional two pointed arrow using css?

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    facebook and css, how to place a like comment dialog on top of a video?

    How to style
  • s inside
      as a table with custom height?
  • how does the path work in css and js

    How to CSS Display:table grow right

    How to align social like buttons next to copyright text inside footer?

    I want all columns() in a
    have the equal length, how to achieve this?

    how to set css position absolute in hover state

    how to add line break in HTML using jQuery

    How to use images in CSS that is used from Jade files rendered via Node.js

    How to select a child element inside a div using CSS

    How to change CSS style of div after onclick method

    How to apply css to link in dropdown table using arrow keys and hover event?

    How to Convert SASS on the fly to CSS in Python?