CODEWITHSUNDEEP
javascriptjqueryforms
Lieutenant Dan
Lieutenant Dan

Reputation: 8284

custom jQuery checkbox allow only one selection

So, the first thing i did was swap out all instances of: checkbox with 'radio' still didn't get my effect.. I want to keep the 'check mark' and custom background of the box etc that this jQuery script allows, everything is perfect, I just need to assure that only ONE ITEM can be checked / selected..

The number one, the jQuery..

/*! custom-checkbox - v1.0.1  */
(function ($) {

    $.fn.customCheckbox = function() {

        return this.each( function(i,v) {

            //Ensure that a checkbox element was passed
            if ( !$(v).is(':checkbox') ) {
                return false;         
            }

            //Add classes
            $(v).addClass("custom-checkbox");

            //If not wrapped within label tags, wrap it
            var parentLabel = $(v).parent("label");
            var withinLabel = parentLabel.length;

            if ( !withinLabel ){
                $(v).wrap("<label class='custom-checkbox-label'></label>");      
            }  
            else {
                parentLabel.addClass('custom-checkbox-label');
            }

            //Create dummy checkbox
            var dummy = $("<span class='custom-checkbox-display'></span>");
            $(v).after(dummy);
            if ( $(v).prop("checked") ) {
                $(v).next('.custom-checkbox-display').addClass("checked");
            }

            //Add/remove classes to checkbox whenever state changes
            $(v).change( function(e) {
                var checkbox = $(e.currentTarget);
                var state = checkbox.prop("checked");
                if ( state ) {
                    dummy.addClass("checked");
                }
                else {
                    dummy.removeClass("checked");
                }
            });

            //Make reset button aware of the custom checkboxes
            var form = $(v).parents("form");
            var reset = form.find("input[type='reset']");
            reset.each( function(ri,rv) {
                if ( !$(rv).hasClass("custom-checkbox-aware") ) {
                    $(rv).addClass("custom-checkbox-aware");
                    $(rv).click( function() {
                        form.find(".custom-checkbox:checked").trigger("click");
                    });
                }
            });

        });

    };

}(jQuery));

html form mark-up...

  <div class="form-group_district">
    <p class="label">District Name*</p><br>
            <label class="labeldistrict">
            <input type="checkbox" name="NYCDistrictName" class="checkboxed" required >
            I teach in the New York City Department of Education</label><br>
            <label class="labeldistrict">
            <input type="checkbox" name="ChiDistrictName" class="checkboxed" required >
            I teach in the Chicago Public Schools</label><br>
            <label class="labeldistrict"> 
            <input type="checkbox" name="LADistrictName" class="checkboxed" required >
            I teach in the Los Angeles Unified School District</label><br>
            <label class="labeldistrict">
            <input type="checkbox" name="othDistrictName" class="checkboxed" required >
            Other</label><br>               
            <input  type="text" name="othDistrictName" maxlength="100" class="otherdistrict" required ><br>
            <br>
    </div>

For the fiddlers out there.. here is a bare bones demo. just imagine the 'check markup' images were showing on selection / focus. (I don't really want to save them and host them somewhere for this demo).

http://jsfiddle.net/gckuX/20/

Upvotes: 0

Views: 404

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can reset all other elements than check the current like:

    //Add/remove classes to checkbox whenever state changes
    $(v).change( function(e) {

        $('input[type="checkbox"].custom-checkbox:checked').not(v).prop("checked", false);
        $('.custom-checkbox-display.checked').not(dummy).removeClass("checked");

        var checkbox = $(e.currentTarget);
        var state = checkbox.prop("checked");
        if ( state ) {
            dummy.addClass("checked");
        }
        else {
            dummy.removeClass("checked");
        }
    });

Demo: http://jsfiddle.net/za65p07x/

Upvotes: 1

LiamHT
LiamHT

Reputation: 1332

your radio buttons need to have the same group/name for only one to be selectable. otherwise, they will be individual buttons - as an aside. input fields should close themselves at the end and do not need to be inside a label tag. as you can use for="" inside a seperate label.

<input type="radio" name="button" value="1"/>
<input type="radio" name="button" value="2"/>

However to work with a checkbox you would need javascript/jquery to remove the 'checked' attribute

$("document").ready(function(){
  $('input[data-name="check"]').click(function(e){
  var isChecked = $(this).is(":checked");
    $('input[data-name="check"]').removeAttr("checked");
    $(this).prop("checked", isChecked);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" data-name="check" value="1"/>
<input type="checkbox" data-name="check" value="2"/>

Upvotes: 1

Related Questions