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
