Develop Reference

Preventing radio button changes based on select box selection

I have two radio buttons (Yes/No) and am trying to force it to 'No' when a certain select box selection is made. Here's what I have for the script (below), but it totally disables the radio buttons and doesn't post the data to our db. How can I...
Force the radio button selection to No?
Disable the ability to change the radio button from No to Yes?
Still post the data to our db?
$(function() {
$('#presence').change(function() {
var value = $(this).val()
var invitation = value === 'common' || value === 'frequent'
$('.radioyesno input').prop('disabled', invitation)
if (invitation) {
$('.radioyesno input:last').prop('checked', true)
}
}).change()
})

Your code seems like it has three problems:
You use $('.radioyn input') and $('.radioyesno input:last'). Is it .radioyn or .radioyesno?
You're calling }).change() for no reason. That call does absolutely nothing. .change() is used to bind an listener to when something changes.
You are not actually posting the update. To post it, you will need to call .submit() on the form, or .click() on the submit button.
Once you fix the above 3 issues, you should achieve your expected behaviour. If anything is not working, I suggest using console.log and breaking your code into smaller areas to test and make sure each line of code does what you expect it to do.

Javascript/JQuery - Default 2 Radio Inputs Sharing Same ID

I've spent so much time trying to figure this out myself (hours and hours!) and I am slowly figuring it out but at this stage I could really do with some help.
Right now, I think the problem is that the radio button has a ID only so I cannot trigger both together.
Objective:
I need to default a specific radio input that exists in 2 forms on the same page. The radio button has the same ID in each form. I cannot change the code these forms use directly. I can only manipulate it with javascript or jquery.
Each form is wrapped in it's own unique div so I have tried to search and find the radio input in each unique div and trigger the click hoping both would be clicked but only one radio button is clicked.
Please see my JSFiddle Code below
//Form 1
<div id="tmp_order2step-70097"><input type="radio" id="pid-909272"
name="purchase[product_id]" value="909272"></div>
//Form 2
<div id="tmp_order2step-70097-154"><input type="radio" id="pid-909272"
name="purchase[product_id]" value="909272"></div>
//Trying to click Form 1's radio button
$(function () {
$(document.getElementById('tmp_order2step-70097')).find("#pid-
909272").trigger("click");
});
//Trying to click Form 2's radio button
$(function () {
$(document.getElementById('tmp_order2step-70097-154')).find("#pid-
909272").trigger("click");
});
Result - Only one radio button/input clicked.
http://jsfiddle.net/0j5tyhq8/
Thank you for any help/advice with this!
UPDATE: Thanks for the advice. I cannot change radio names without breaking the code so I have started over and used one form which works fine of course.

Re-enable radio inputs with a clear function

I've tried a number of different things, including typical form reset and jQuery examples I've found across the web with no luck.
Screenshot:
The Goal:
I have a rankable list where a user is expected to rank items from 1-6 according to importance to them. If they select "2" for a certain row, we don't want to let them select "2" for another row. Here is the jQuery that's accomplishing this:
// Disable sibling radio buttons in form once an item is selected
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
The Issue:
This code seems to be working, with a couple of quirks.
The code correctly disables sibling rows, but if the user wants to change, they're stuck. They can click "2" on a row, then click "3" on the same row, but that leaves all other "2" and "3" options disabled completely.
The user needs a way to completely clear the form via a "start over" or "reset" button that apparently needs some special jQuery magic that I haven't been able to figure out yet.
I took code referenced in another post from this url, but it seems to only half work on my site. I notice on that fiddle link that if you click "1", it also disables "2" and "3" on the same row, which doesn't happen on my local development attempt. It does, however, permanently disable "2" in other rows if you were to click "2"...so I'm unsure why it works in the example but not my code (above).
There's got to be some easier way around this that I'm just not seeing here. I appreciate any help or code examples that might work along these lines.

Instead of outright disabling radio options that are not valid, you can instead take one of two approaches:
When the user clicks an option, validate the option on the fly, i.e., that "3" is not already selected when you click another "3". If not valid, then display a popup to user and clear it out.
When the user clicks an option, say a "3", then clear out all other "3" options so that only one is rated at that amount at a time.
Here is a sample code that will use method #2, clearing out all same value options whenever an option is clicked: http://jsfiddle.net/xy9wC/

From a users perspective, disabling these kinds of radio buttons may be very annoying to deal with as it forces the user to use two clicks instead of one while selecting something else.
A better alternative would be to "suggest" errors to the user, then enforce them on submit. For example, you could make the row with the invalid option red, then allow the user to discover the error and fix it themselves.
An even better way than that, use jQuery to create a sortable list.
http://jqueryui.com/demos/sortable/
-Sunjay03

Checking if radio buttons are checked in Firefox

On my site, I have two checkboxes created in my ASP.NET MVC view like so:
Html.RadioButton("check", "true", "true" == (string) ViewData["someKey"], new { id = "check1"});
Html.RadioButton("check", "false", "false" == (string) ViewData["someKey"], new { id = "check2"});
I am positive that ViewData["someKey"] has the value "true" in it.
In my JS init function, I perform the following check:
alert($('#check1').is(':checked') + " " + $('#check2').is(':checked'));
In Firefox (and only Firefox), my alert dialog will show the following (it works as expected in every other browser):
Initial page load: true false
Normal refresh via Ctrl + R: false false
Refresh skipping cache via Ctrl + Shift + R: true false
I have tried many different methods of looking at the checkbox value, including $('#check1').attr('checked') without success. If I examine the HTML in Firebug, I can see that the first radio button has the property checked="checked" in it.
Why is the checkbox value changing in FF when I refresh, and how can I mitigate this? Since this seems to be a FF-only bug, how can I change my code to make it work?
This SO question seemed to ask something similar, but none of the proposed solutions seem to work in this case.
Edit: I should also point out that when the radio button is rendered after the refresh in FF, it's not actually being displayed as checked either, despite what the HTML is telling me.
Edit2: Adding raw HTML as per request
<input id="check1" type="radio" value="True" name="check" checked="checked"/>
<input id="check2" type="radio" value="False" name="check"/>

Can we see the generated HTML? Are you really creating two radio buttons with both the same name and the same value?
Remember when you hit refresh, browsers try to preserve the form field contents of the page before the refresh. This includes radio button state. If you have two indistinguishable radio buttons that would seem to be a good way to confuse a browser trying to re-establish the form state.

It sounds like your script could be running before the page is fully loaded. Where did you put the Javascript code? If you haven't already, try moving the code to the end of the <body> block.

I had the same problem a few days ago and the issue was that I was doing the "check" before the item was fully loaded or rendered, it was a DropDownList that I rendered with jQuery.
My case was very specific, but I had to rework the code to take this into account...

It seems that the problem isn't with checking whether or not the radio buttons are checked, but more that they buttons are actually unchecked even though the HTML code says otherwise.
I've posted a followup question to this one here as an addendum to this topic.
EDIT: This page has a good description of the problem and the solutions you can take to solve it.

I used this to force firefox to reset the radiobuttons checked upon refresh.
$(function(){ $('input[name="radiobuttongroup"]')[0].checked = true; });
where [0] is the index of the radiobutton in the specific group ( [0] = first radio button, [1] = second radio button, ..)

We've had a similar bug in firefox when using jquery to change the selection. Even though the code changed correctly according to firebug none of the radio buttons was selected. The solution we found is to remove the radio buttons from the DOM and just put them back.
var allradiobuttons = $('...');
allradiobuttons.click(function() {
var radiobutton = $(this);
allradiobuttons.removeAttr("checked");
radiobutton.attr("checked", "checked");
var parent = radiobutton.parent();
parent.html(parent.html()); // This is a weird fix
}

"SelectAll" checkbox not working when back button on the browser is clicked

I have the following html page:
<html>
<body>
<script>
var check = 0;
function doNow()
{
void(d=document);
void(el=d.getElementsByTagName('INPUT'));
for(i=0;i<el.length;i++)
{
if(check == 0)
void(el[i].checked=1)
else
void(el[i].checked=0)
}
if(check == 0)
check = 1;
else
check = 0;
}
</script>
<HR>
<form>
<INPUT TYPE="CHECKBOX" name="DG1">DG1
<INPUT TYPE="CHECKBOX" name="DG2">DG2
<INPUT TYPE="CHECKBOX" name="DG3">DG3
<INPUT TYPE="CHECKBOX" name="DG4">DG4
<INPUT TYPE="CHECKBOX" name="DG5">DG5
<input type=button onclick="doNow()" value="CheckBox All Now">
</form>
</body>
</html>
If "CheckBox All Now" is clicked all checkboxes are checked. Then,
if "Back" button or "Refresh" button is pressed. The "CheckBox All now" has to clicked twice to uncheck all checkboxes.
Please let me know how to handle "CheckBox All Now" in case of "Refresh" or "Back".
Thanks in Advance,
Mahesh.

It's because when the page is reloaded, the Javascript is parsed and your declaration
var check = 0;
unsurprisingly causes the check variable to be reset to zero at this point. Thus after the page is reinitialised, the first click of the button will enable all checkboxes. It seems that the issue here stems from a difference in how the form renderer remembers state, and how the Javascript engine remembers "state". The latter can't really be "fixed" the way you want as the script essentially needs to be run every time.
What you might choose to do is pull the initial "checked" state out of the controls themselves. Your current code explicitly assumes that the checkboxes will all be unchecked initially (this is basically what you're saying by "check = 0"; this variable is storing the state of the checkboxes as far as the Javascript is aware). Instead, you might change the line to:
var check = document.getElementsByTagName('INPUT')[0].checked;
Of course, this wouldn't work in the current location as it is declared before the form is defined. You would either need to register this as a closure to be run once the document has loaded, or alternatively pull this line out and put it in <script> tags that occur after the form element in the document (this isn't the cleanest way to do it but works for quick-and-dirty development; registration of functions within the head is the way to go in general).
I've tested both approaches and they work. I'm sure that there will be other potential solutions to this issue that come up with other peoples' answers!
EDIT: Big edit after thinking about this for a while. The fundamental issue here is that the check variable gets out-of-sync with the actual checkboxes themselves - what I described above is a way to avoid this when the page is reloaded/reinitialised.
However, you will still have other issues. What happens if the user manually clicks all of the checkboxes? They will now be active, but your check variable will still be 0, and so click the "check all" button will activate them all (which will have no effect). If I clicked this button with all checkboxes checked, I would expect it to behave consistently, regardless of how those checkboxes got to that state (which should be irrelevant).
Also, what happens if some of your checkboxes are checked and some are unchecked? What is the button meant to do in that situation?
The best solution overall would probably be to remove the check variable altogether, and instead work it out on demand at thstart of every doNow call. That is, inspect the array of checkboxes, read their current values and from this derive what the checkboxes should be set to. (This might be really simply if, for example, the functionality turns out to be that every checkbox should simply be individually inverted - it depends on the actual functional requirements.)
(Also, as a coding style issue, the part of your code that says
if(check == 0)
void(el[i].checked=1)
else
void(el[i].checked=0)
can simply be replaced by
el[i].checked = (1 - check);
and asides from the fact that we're hopefully getting rid of this variable, it ought to be a boolean rather than an integer as it only has two states.)

My suggestion is to use a checkbox instead of a button. When someone clicks on the checkbox, all other checkboxes will be set to however that checkbox is set.
So, if the "Check all" checkbox is checked, and you click it. all other checkboxes will be cleared.
Should work a bit better in the scenario you describe.

dtsazza is right - when the page is refreshed you start from scratch.
I note that the 'Check All Now' button actually toggles the checked status. How about 2 buttons (links might be better); one to check all and one to uncheck all?

You could store the checked variable in a hidden field. That way it would persist with the same longevity as the checkboxes.