I want to create a radio button that can have an unchecked value. So I created the code:
$('form').on('click', 'input[type="radio"]:checked', function (event) {
$(this).prop("checked", false);
});
Well, this is pretty straightforward: click on a checked radio, uncheck it.
But, what happens is that it never checks the radio in the first place. When I click an unchecked radio it checks before detecting if is checked, then considers it checked and unchecks it.
Well, this is not a duplicate as it asks a different question. It's not about how to uncheck, but how to automatically uncheck upon clicking.
How can I go around this problem?
You can solve your issue like following.
$('form :radio').attr('data-ischecked', function() {
return this.checked;
}); //set initial status in data-ischecked attribute
$('form').on('click', ':radio', function () {
var status = $(this).data('ischecked'); //get status
status && $(this).prop("checked", false); //uncheck if checked
$(this).data('ischecked', !status); //toggle status
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio"/>
<input type="radio"/>
</form>
Your example only executes when the button is clicked. To have the radio button be checked when the page loads, I would put a $(document).onload() event that sets the button's value to checked.
Related
I'm attempted to only allow the submit button in a form to be enabled when a user has checked off a checkbox. I've gotten the button to start disabled, then become enabled when the checkbox is initially clicked on, but if I then uncheck the checkbox, the button doesn't become re-enabled.
HTML:
<input type="checkbox" id="waivercheck">
<input class="submit join-button" type="submit" value="Join Now" id="joinevent" disabled>
Script:
$(document).ready(function() {
$('#waivercheck').click(function(){
if($(this).checked){
$('#joinevent').prop("disabled",false);
} else {
$('#joinevent').prop("disabled",true);
}
});
});
Can anyone help?
You can access the checkbox status via this.checked and not $(this).checked. And I recommend using the change event.
$(document).ready(function() {
$('#waivercheck').change(function(){
if(this.checked){
$('#joinevent').prop("disabled",false);
} else {
$('#joinevent').prop("disabled",true);
}
});
});
Demo: https://jsfiddle.net/rbnndz23/
Your issue is with the conditional.
A jQuery object doesn't have a checked property but the DOM element itself does
Instead of
if($(this).checked)
Can do
// native element has checked property
if(this.checked)
Or
// jQuery is() with pseudo selector
if($(this).is(':checked'))
You don't need to use $(this).checked. Instead try using this.checked. See here.
I have a set of yes/no radio buttons. I would like a modal window to open when the user clicks an unchecked 'no' radio button only if the yes radio button IS already checked. There is a state where none of the buttons will be checked and in this case I don't want the modal to appear.
My problem is I am showing this modal in a click event on the 'no' button. I have no way to tell if 'yes' was previously checked, since in this scope, we know 'no' is checked because we're inside of the click event for it. Any suggestions?
<span class="yesRadioButton" data-questionnumber="1">
<input id="MHQPreQuestion1_rbQuestAnswerYes" name="YesNo" type="radio"value="Yes" checked="checked">
</span>
<span class="noRadioButton" data-questionnumber="1">
<input id="MHQPreQuestion1_rbQuestAnswerNo" name="YesNo" type="radio"value="No">
</span>
$('.noRadioButton > input:radio:not(:checked)').click(function () {
DialogOpen();
});
You can set an attribute on the "yes" input when you click it, so you know if it has been previously set. Then you can grab the first input through jQuery and check its value before deciding whether you want to have the popup appear inside of the "no" click handler:
$('.noRadioButton > input').click(function() {
var yesButton = $('.yesRadioButton > input');
var yesValue = yesButton.attr('wasChecked');
if (yesValue === "true") {
//do your popup
}
yesButton.attr('wasChecked', false);
});
$('.yesRadioButton > input').click(function() {
$(this).attr('wasChecked', true);
});
Example here
edit: updated to work with radio buttons, i was thinking check boxes
I am adding and removing class to the elements on change event. The below code is working for dropdown and radio buttons, but is not working for checkbox and dropdown. The disable class gets applied, but on unchecking it is not getting enabled..
$(function() {
$switchers.each(function(index, elem) {
$(elem).prop("disabled", false).removeClass("c_disabled")
.closest(".wrapper")
.find(".overlay").remove();
if ($(elem).prop('tagName') == 'SELECT') {
$(elem).children().removeClass('dis').removeAttr('disabled');
}
});
How can I make it work for checkbox's check, uncheck.
For example, If you see my fiddle when you check C3, dropdown option Two gets disabled, but when you uncheck it, it doesn't get enabled again, It gets enable while you uncheck other checked checkbox.
What is the reason for this? When I have a combination of radio and dropdown it works for that.
I want it to enable it once I uncheck C3
It has anything to do with the point of checkbox being multiselect?
I am able to check If the options are checked or unchecked with the below code.
$(".checkdrop").on("change", function(e) {
var $this = $(this);
var ischecked = e.target.checked;
if(ischecked) {
alert("checked it");
}
else
{
alert("unchecked it");
//$(elem).removeClass('c_disabled').removeAttr('disabled');
}
});
Here is my fiddle
Please help.
These lines are working on their own. You may check it on the console.
$(".c_disabled").prop("disabled",false);
$(".c_disabled").removeClass("c_disabled");
Hi I have numbers of check boxes and below that I have a Button, which will filter data as per check box selection..
When I will click on filter button it will transfer to other page and when I click on back button the checkbox reamains checked.
but I want that when I click on back button then checkbox should be uncheck.
Any help.
For those who have similar issues, add autocomplete="off" to checkbox might help.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You can reset the checkboxes on page load using jQuery
$('input:checkbox').prop('checked', false);
Demo (Checkbox will be never checked as onload am getting rid of checked property)
ondomready (Place the below code anywhere in your document)
$(document).ready(function(){
$('input:checkbox').prop('checked', false);
});
You may use below code :
window.onbeforeunload = function() {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false)
};
Try this when back button is clicked
Use Jquery to clear the checkboxes
$("input[type='checkbox']").each( function() {
$(this).removeAttr('checked');
});
Let's say I have a group of two radio buttons:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
It seems that clicking the second button triggers an event handler on that button only. However, the first button does become deselected, and visually does change. Can anyone verify that events are fired only on the button that was selected, and not any of the other buttons in the group which become deselected as a result of the click? Any clever ways to watch a radio button for a deselecting event?
Although it cannot be confirmed, but the event change triggers don't happen on the entire group.
If you want that to happen, you can do it using various JS libraries like jQuery, YUI, etc. or even plain javascript, as follows:
function buttonGroupChange(){
var radioElements = document.getElementsByName("radio_group_name");
for(var i = 0; i < radioElements.length; i++){
if(radioElements[i].checked == true){
//do something
}
else{
//do something
}
}
}
This function can be called on the onClick or the onChange event.
I hope that solves your problem.
Firstly, it is important to note that a "Click" event on any of the radios fires AFTER the "checked" value is already updated. This is important - because it means you can't detect the previous item once the event is already fired. If you Cancel the event, you are actually changing the value BACK - not stopping it initially. This is important to how you approach the problem.
Example:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
// At this point, the ':checked' item is button1.
$('input[type=radio]').bind('click', function (ev) {
// If you click on button2 - by this point, the ':checked' item is already button2.
ev.preventDefault(); // These two lines will stop the radio from actually
ev.stopPropagation(); // changing selection.
// At this point, the ':checked' item is set BACK to button1.
});
Because of this, the easiest solution is to track the "last" selected item in a closure alongside your event handlers, as follows:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
<script type="text/javascript">
var $last = $('[name=radioButtonGroup]:checked');
// Select the radio buttons as a group.
var $radios = $('[name=radioButtonGroup]').bind('change', function (ev) {
// Click event handler
var $clicked = $(ev.target); // This is the radio that just got clicked.
$last.trigger('unclick'); // Fire the "unclick" event on the Last radio.
$last = $('[name=radioButtonGroup]:checked'); // Update the $last item.
// Should see the clicked item's "Value" property.
console.log("Clicked " + $clicked.attr('value'), $clicked, ev);
}).bind('unclick', function (ev) {
// Handler for our new "unclick" event.
// - fires whenever a radio loses focus.
var $unclicked = $(ev.target); // The radio losing it's checked status.
// Should see the unclicked item's "Value" property.
console.log("Unclicked " + $unclicked.attr('value'), $unclicked, ev);
});
</script>
For a working example, see:
http://jsfiddle.net/TroyAlford/wvrtC/
I can't confirm that an event is only fired for the selected button, but if you needed to do something with the button that was just deselected, the following would work:
$(document).ready(function(){
var selectedRadio = null;
$("input:radio").change(function(){
if(selectedRadio != null){
alert(selectedRadio.val());
}
selectedRadio = $(this);
});
});
In action here.
If you need to keep track of multiple groups of radio buttons, you could do it with an array of currently selected buttons and match within that array when a change is detected.
The simple nature of the radio button set is that only one button can be selected at a time. Selecting a button automatically means the others are not selected, but there is no specific action for deselecting. Therefore, you only need to worry about the one event, because it affects all the buttons in the set at one time.
If you would like to use an element that allows for multiple selections try checkboxes.