We Keep Coding

UniformJS radio buttons not clickable

I've used UniformJS before and am having an issue with radio buttons this time around. I have uniform initialized for only checkbox and radio, and I can check/uncheck checkboxes just fine. My radio buttons are stylized but not showing as clicked. I have no errors in the console, and I'm not sure what the issue could be. I copied the exact radio inputs from the working fiddle, with no luck. http://jsfiddle.net/Wp9kx/ When giving the attribute checked in the tag, it appears as clicked but will not unclick. It seems the click isn't getting pushed through the styling.Any ideas?
$("input[type=checkbox], input[type=radio]").uniform();

This will happen if your radio isn't inside a label.
This works:
<label>
<input type="radio" value="option1" />option 1
</label>
This doesn't:
<input type="radio" value="option1" />option 1
Here is the bug report.

Checking and unchecking radio buttons with Jquery Mobile

I can't check a set of checkboxes programatically with jquery mobile, I have the following code:
<div data-role="fieldcontain" id="div_radio" class="radiogroup">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-pieces" id="radio-choice-1" value="3" checked="checked" />
<label for="radio-choice-1">1 to 3</label>
<input type="radio" name="radio-pieces" id="radio-choice-2" value="5" />
<label for="radio-choice-2">4 to 5</label>
<input type="radio" name="radio-pieces" id="radio-choice-3" value="6" />
<label for="radio-choice-3">over 5</label>
</fieldset>
</div>
If I do: $("input[type='radio']:last").attr("checked",true).checkboxradio("refresh"); everything works perfect, but none of this work at all:
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(1)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(2)").attr("checked",true).checkboxradio("refresh");
How can I properly manipulate these elements? Unselecting all checkboxes also works fine:
$("input[type='radio']").attr("checked",false).checkboxradio("refresh");
It seems that the only checkbox working is the last one.

They all work just fine. You just need to trigger refresh on all input radio in group.
$("input[type='radio']:first").attr("checked", "checked");
$("input[type='radio']").checkboxradio("refresh");
jsFiddle is here.

Nothing worked for me except:
$('#reset').click(function(){
$('#Store').trigger("click").trigger("click"); // yes... twice
});
On jQuery Mobile 1.4.2.

For me works this to uncheck the whole group of radios:
$(".my_class").removeAttr("checked");
$(".my_class").checkboxradio("refresh");

This doesn't seem right.
The single quote is not needed input[type=radio] is correct.
I'm using an outdated version (1.1.1).
It would be help to know what version you're using.
Keep in mind that those are radio buttons, only one selected at a time.

in Jquery mobile radio button refresh like this:
$(".iscfieldset input[type='radio']:first").attr("checked", "checked");
$(".iscfieldset input[type='radio']").checkboxradio().checkboxradio("refresh");
try this working fine for me

Javascript/HTML gray out radio list?

Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!

Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice

Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->

Button with radio button functionality

I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)

jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.

First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.

Why am I submitting the form twice? jQuery submit() with radio button

I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego

You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});

You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.