Unselectable radios

by Nathan Friend

HTML

<div id='container'>
    <input id='test' type="radio" name="testing">Option 1</input>
    <input id='test' type="radio" name="testing">Option 2</input>
    <input id='test' type="radio" name="testing">Option 3</input>
    <input id='test' type="radio" name="testing">Option 4</input>
    <input id='test' type="radio" name="testing">Option 5</input>
    <input id='test' type="radio" name="testing">Option 6</input>
</div>

CSS

#container {
    margin: 20px;       
}

JavaScript

(function( $ ) {
    $.fn.toggleRadio = function() {
    
        var allselected = this;
        
        return this.each(function() {
            $(this).mousedown(function(e) {
                e.preventDefault();
                if ($(this).is(':checked')) {
                    allselected.each( function() {
                        $(this).attr('checked', false);
                    });
                } else {
                    $(this).attr('checked', true).siblings().attr('checked', false);
                }
            }).click( function(e) { e.preventDefault(); })
        });
    };
})( jQuery );
        
$( function() {
    $('[name="testing"]').toggleRadio();
});