Afgelopen week kreeg ik het verzoek om binnen een formulier de mogelijkheid in te bouwen voor het uitzetten van radiobuttons. Normaal gesproken worden radiobuttons gebruikt voor verplichte opties zoals bijvoorbeeld de keuze tussen man of vrouw.

Om dit te realiseren ben ik op internet het onderstaande script tegengekomen, gepubliceerd door techfoobar, wat ik graag met jullie wil delen.

Het script bestaat uit twee delen HTML en jQuery. Zoals je hieronder kan zien is de HTML voorzien van een extra attribuut genaamd nc=”0″ of nc=”1″. De waarde moet 0 zijn wanneer de radio button aanstaat.

<form>
    <input type="radio" id="radio1" checked="checked" class="radio" nc="0" />
    <input type="radio" id="radio2" class="radio" nc="1" />
</form>

Het javascript deel kan direct in de website worden geplakt binnen de jQuery container.

$('input[type="radio"]').on('mouseup', function() {
    var radio = $(this);
    if(radio.prop('nc') == 0) {
        setTimeout(function() {
            // *to work: this needs to run only after the event completes*
            if(radio.is(':checked')) radio.removeAttr('checked');
            radio.prop('nc', 1);
        }, 10); 
    }
    else radio.prop('nc', 0);
});

Een online voorbeeld hiervan is terug te vonden op de volgende url:
http://jsfiddle.net/535dR/3/

bron: stackoverflow.com

Vond je dit een leuk blog artikel dan is een reactie altijd welkom: Klik hier om een reactie achter te laten.

Abonneer je op dit blog d.m.v. e-mail

Meld je hieronder aan met jouw e-mailadres en ontvang als eerste een mailtje wanneer er een nieuw artikel online gaat op mijn blog.