Turning on / off the radio button does not work properly
I am trying to toggle my buttons radio
either true
or false
using the following functionality.
But as the first click, I don't get any response. Later it works great. to solve this problem and what is wrong here?
var switching = false;
$('button').on("click", function() {
switching = switching == false ? switching = true : switching = false;
console.log("switching", switching); //first click true but not works!
$(":radio").attr("disabled", switching);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>
<button>
Switch Me
</button>
source to share
You can only start with true
and switch like thisswitching = !switching
var switching = true;
$('button').on("click", function() {
switching = !switching
$(":radio").attr("disabled", switching);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>
<button>
Switch Me
</button>
source to share
Or you can do it with just one line:
$('button').on("click", function() {
$(":radio").prop('disabled', function(){ return !this.disabled });
});
button.border { border:2px solid green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>
<button>Switch Me</button>
source to share
The ternary operator is incorrect :
switching = switching == false ? true : false;
so your code will look like this:
var switch = false;
$('button').on("click", function(){
switching = switching == false ? true : false;
console.log( "switching", switching );
$(":radio").attr("disabled", switching);
})
but the first click won't work with that, so you need to initialize it as true.
var switching = true;
$('button').on("click", function(){
switching = switching == false ? true : false;
console.log( "switching", switching );
$(":radio").attr("disabled", switching);
})
button.border{
border:2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>
<button>
Switch Me
</button>
source to share
You can also check first if disabled or not
$('button').on("click", function() {
if ($(":radio").prop('disabled')){
$(":radio").attr("disabled", false);
}
else
{
$(":radio").attr("disabled", true);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>
<button>
Switch Me
</button>
source to share
Add a generic class to your HTML:
<input type="radio" name="foo" value="Y" checked disabled class="radio">
<input type="radio" name="foo" value="N" disabled class="radio">
<input type="radio" name="foo" value="X" disabled class="radio">
<button>
Switch Me
</button>
Now here is your JS using the class
$( document ).ready(function() {
$('button').on("click", function(){
if($('.radio').is(':enabled')) {
$(".radio").attr("disabled", true);
}else {
$(".radio").attr("disabled", false);
}
});
});
source to share