[jQuery] PrettyCheckboxes not working with radio array names
With this script, I cant get it to work with radio buttons when their names
are used as arrays (ie. group[1], group[2], etc). Each radio button in each
group gets treated as a stand-alone radio button (on the UI side only) - as
if they were checkboxes.
In other words, each RB in each group can be checked/unchecked independent
of the other RBs in the same name group.
If I use non-array names for the radio button groups (ie group1, group2,
etc) it works fine. But, I need the array names because the number of groups
changes and I need to loop thru however many there are.
Every attempt I've made to get it to work with array names has broken it.
<sigh>
Any insight, code change, fix, etc would be greatly appreciated.
The script is called via:
$(’input[type=checkbox],input[type=radio]‘).prettyCheckboxes();
Thanks for any help!
<code>
/* ------------------------------------------------------------------------
prettyCheckboxes
Developped By: Stephane Caron (http://www.no-margin-for-errors.com)
Inspired By: All the non user friendly custom checkboxes solutions
Version: 1.1
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */
jQuery.fn.prettyCheckboxes = function(settings) {
settings = jQuery.extend({
checkboxWidth: 20,
checkboxHeight: 20,
className : 'prettyCheckbox',
display: 'inline'
}, settings);
$(this).each(function(){
// Find the label
$label = $('label[for='+$(this).attr('id')+']');
// Add the checkbox holder to the label
$label.prepend("");
// If the checkbox is checked, display it as checked
if($(this).is(':checked')) { $label.addClass('checked'); };
// Assign the class on the label
$label.addClass(settings.className).addClass($(this).attr('type')).addClass(settings.display);
// Assign the dimensions to the checkbox display
$label.find('span.holderWrap').width(settings.checkboxWidth).height(settings.checkboxHeight);
$label.find('span.holder').width(settings.checkboxWidth);
// Hide the checkbox
$(this).addClass('hiddenCheckbox');
// Associate the click event
$label.bind('click',function(){
$('input#' + $(this).attr('for')).triggerHandler('click');
if($('input#' + $(this).attr('for')).is(':checkbox')){
$(this).toggleClass('checked');
$('input#' + $(this).attr('for')).checked = true;
}else{
$toCheck = $('input#' + $(this).attr('for'));
// Uncheck all radio
$('input[name='+$toCheck.attr('name')+']').each(function(){
$('label[for=' + $(this).attr('id')+']').removeClass('checked');
});
$(this).addClass('checked');
$toCheck.checked = true;
};
});
$('input#' + $label.attr('for')).bind('keypress',function(e){
if(e.keyCode == 32){
if($.browser.msie){
$('label[for='+$(this).attr('id')+']').toggleClass("checked");
}else{
$(this).trigger('click');
}
return false;
};
});
});
};
checkAllPrettyCheckboxes = function(caller, container){
if($(caller).is(':checked')){
// Find the label corresponding to each checkbox and click it
$(container).find('input[type=checkbox]:not(:checked)').each(function(){
$('label[for='+$(this).attr('id')+']').trigger('click');
if($.browser.msie){
$(this).attr('checked','checked');
}else{
$(this).trigger('click');
};
});
}else{
$(container).find('input[type=checkbox]:checked').each(function(){
$('label[for='+$(this).attr('id')+']').trigger('click');
if($.browser.msie){
$(this).attr('checked','');
}else{
$(this).trigger('click');
};
});
};
};
</code>
--
View this message in context: http://www.nabble.com/PrettyCheckboxes-not-working-with-radio-array-names-tp20412719s27240p20412719.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.