Have an issue with javascript Jquery and php buttons for checkbox - php

Question

I have a problem with this code :
jQuery(".cb-disable").click(function(){
var parent = jQuery(this).parents('.switch');
var vid =this.id;
jQuery('#'+vid).attr('id','');
jQuery('#'+vid).attr('id','');
jQuery('.cb-enable',parent).removeClass('selected');
jQuery(this).addClass('selected');
jQuery('input[name='+vid+'-off]').attr('checked', true)
jQuery('input[name='+vid+'-on]').removeAttr('checked');
jQuery('input[name='+vid+']').attr('name', vid+"-on");
jQuery('input[name='+vid+'-off]').attr('name', vid);
});
});
because this code is correct for the example code below.
<p class="wpptabs_hoverable-286 switch">
<input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
<input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286-off" value="off">
<label for="ON" id="" class="cb-enable"><span>ON</span></label>
<label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>
But it isn't correct. Can you help me?
This code is based on http://devgrow.com/iphone-style-switches/
for php generating a checkbox in table column.
I have question: "What is wrong in this javascript code?".
Sorry for my english, but I rarely write in this language

Answer 1

Your names have to be the same for each radio input, otherwise they act independently (meaning they can show both on and off state) — in the code below I have deleted the -off part in the name for the off radio:
<p class="wpptabs_hoverable-286 switch">
<input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
<input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286" value="off">
<label for="ON" id="" class="cb-enable"><span>ON</span></label>
<label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>
You can see that the on and off buttons now work as expected here:
http://jsfiddle.net/S8qFT/
update
It seems that getting the radios to work wasn't your only issue. I've simplified the javascript so it only does what it needs to, it should work as you required now.
http://jsfiddle.net/65JRx/
javscript
/// make sure we apply the click handling to both on and off labels
$(".cb-enable,.cb-disable").click(function(){
/// find the elements we need
var self = $(this);
var parent = self.parents('.switch');
/// handle the selected highlight, first remove all selected
parent.find('.selected').removeClass('selected');
/// then select the right one again
self.addClass('selected');
/// most modern browsers should handle transfering the label click
/// to the actual radio (via `for` and `id`), but just in case.
if ( self.is('.cb-enable') ) {
parent.find('input[value=on]').prop('checked', true);
}
else {
parent.find('input[value=off]').prop('checked', true);
}
});
markup
<div class="wpptabs_hoverable-286 switch">
<!-- I've laid these inputs out just to make them
easier to read, I wouldn't normally lay markup out
this way //-->
<input
type="radio"
class="on286"
name="wpptabs_hoverable-286"
id="wpptabs_hoverable-286-on"
value="on"
checked="checked"
/>
<!-- I've renamed your IDs to have more specific names
this will mean you can use this method on more than
one set of inputs -- as long as you keep the IDs inline
with your id convention. //-->
<input
type="radio"
class="off286"
name="wpptabs_hoverable-286"
id="wpptabs_hoverable-286-off"
value="off"
/>
<label
for="wpptabs_hoverable-286-on"
class="cb-enable selected">
<span>ON</span>
</label>
<label
for="wpptabs_hoverable-286-off"
class="cb-disable">
<span>OFF</span>
</label>
</div>
css
/**
* Added a highlight so you can see selected working
*/
label.selected { color: blue; }
/**
* I've removed the display none so you can still see the inputs
* working as they should. Obviously you can put the display none
* back to get your working version.
*/
.switch input{/*display: none;*/ opacity: 0.5; position: relative;}