Question

I have a jQuery script that finds all the input type=radio in the html and appends some fancy css on them. The problem is that I want some of the radio buttons to be untouched.
Here is the jQuery:

$(this).each(function (i) {
    if ($(this).is('[type=checkbox],[type=radio]')) {
        var input = $(this);
        var label = $('label[for=' + input.attr('id') + ']');
        var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
        $('<div class="custom-' + inputType + '"></div>').insertBefore(input).append(input, label);
        var allInputs = $('input[name=' + input.attr('name') + ']');
        label.hover(

        function () {
            $(this).addClass('hover');
            if (inputType == 'checkbox' && input.is(':checked')) {
                $(this).addClass('checkedHover');
            }
        },

        function () {
            $(this).removeClass('hover checkedHover');
        });
        input.bind('updateState', function () {
            if (input.is(':checked')) {
                if (input.is(':radio')) {
                    allInputs.each(function () {
                        $('label[for=' + $(this).attr('id') + ']').removeClass('checked');
                    });
                };
                label.addClass('checked');
            } else {
                label.removeClass('checked checkedHover checkedFocus');
            }
        })
            .trigger('updateState')
            .click(function () {
            $(this).trigger('updateState');
        })
            .focus(function () {
            label.addClass('focus');
            if (inputType == 'checkbox' && input.is(':checked')) {
                $(this).addClass('checkedFocus');
            }
        })
            .blur(function () {
            label.removeClass('focus checkedFocus');
        });
    }
});

This works fine but it will change all the radio buttons on the page. And I want to add some radio buttons that needs to be unchanged. I want radio buttons in this html code to be untouched by the script above:

<p class="field switch">
    <input type="radio" id="radioZ1" name="field1" checked />
    <input type="radio" id="radioZ2" name="field2" />
    <label for="radioZ1" class="cb-enable selected"><span>Enable</span>
    </label>
    <label for="radioZ2" class="cb-disable"><span>Disable</span>
    </label>
</p>

So I was trying to add .not() right after the .is() but I have had no luck. Can somebody help me please?

Answer 1

Here is my working solution:

if($(this).is('[type=checkbox],[type=radio]') && !($(this).is("p.switch > [type=radio]")) )