We Keep Coding

Jquery preventDefault for the parent link only

I have input radios element as a children of a hyperlinks as the following:
<li ><input type="radio" class="searchSrc" name="searchSrc" value="2" style="display: inline" /> الشروق</li>
<li ><input type="radio" class="searchSrc" name="searchSrc" value="3" style="display: inline" /> الجزيرة</li>
<li ><input type="radio" class="searchSrc" name="searchSrc" value="4" style="display: inline" /> شبكة رصد</li>
I want to preventDefault only for the parent hyperlink of the input while keeping the accessibility of changing the radios values i.e clicking them.
I tried the following:
$(".searchSrc").parent().click(function(event){
event.preventDefault();
$(this).children('.searchSrc').attr('checked', this.checked);
//also I tried to place event.preventDefault(); in this line
})
However, I just able to click one time on a radio a button and I could not able to change the checked radio again.

<a> tag has no checked property . Your this is the <a> element.
To fix what you were trying to do should use prop() and can use it with function callback as follows:
$(".searchSrc").parent().click(function (event) {
event.preventDefault();
$(this).children('.searchSrc').prop('checked', function () {
return !this.checked
});
});
To work straight from the radios themselves would just do:
$(".searchSrc").click(function (event) {
event.stopPropagation();
});
I can't say that I understand why you would want radios inside an <a> tag...seems very strange to me.
DEMO

It's not really clear what you're trying to achieve in your setup, but if you don't want the anchor links around the inputs to be clickable, you should just remove them entirely and get rid of the javascript. They don't serve any purpose given what you're attempting to do. The radio buttons will be properly selectable at that point as well.

The click listener should be on the .searchSrc elements and you should use stopPropagation instead of preventDefault

jquery how to uncheck a radio button in this code

I have two radio button.
and this is my jquery code to unselect the radio button when the other one becomes selected.
$("#RdbToday").click(function () {
$("#RdbDateRange").attr("checked", false);
});
$("#RdbDateRange").click(function () {
$("#RdbToday").attr("checked", false);
});
It is not working. which means that when I select the first one, the other one still on. also I can't unchecked the radio button once I checked it. why?

use .prop() instead:
$('radio_btn_selector').prop('checked', false);

Millind's answer right i am posting this alternative way you can use prop name
of html
Like this
<input type="radio" name="foo">
<input type="radio" name="foo" checked>
<input type="radio" name="foo">
See working demo
Demo
As your comment says you are using asp.net then its very simple to use groupname attribute Read here.....http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.groupname(v=vs.110).aspx

How to trigger a click on checked radio button in jquery or javascript

Javascript:
if (GetCookie('prev_radio_value')!=null){
alert(GetCookie('prev_radio_value'));
$(":radio[value="+GetCookie('prev_radio_value')+"]").attr('checked',true);
$(":radio[value="+GetCookie('prev_radio_value')+"]").triggerHandler('click');
$(':radio:checked').triggerHandler('click');
$('input:radio[name=theme]:checked').click();
}else{
alert("clicking first");
$("input:radio:first").attr("checked", true).trigger("click");
}
HTML code:
<ul>
<li><input type="radio" name="theme" value="theme1"/>Theme1</li>
<li><input type="radio" name="theme" value="theme2"/>Theme2</li>
</ul>
this code is inside div -> 'checkbox_div'
click function :
$("#checkbox_div input:radio").click(function() {
alert("clicked") ;
});
I have used the trigger click in 3 ways but none of them worked or triggered the click event.
example link : http://jsbin.com/ezesaw/1/edit is not triggering the click event upon selection of first radio button.

Just call "click()" without the function as an argument
$("#checkbox_div input:radio").click();

It works just fine:
http://jsbin.com/ivojoz/1/edit
The problem may be that you are not selecting the radio correctly
try
$('#checkbox_div input[type="radio"]').click(function() {
alert("clicked") ;
});

$("#checkbox_div").on('click','input:radio', function() {
alert("clicked");
});
Give this code a shot. It worked for me.

In case u are still interested in this question:
The click event is implied when selecting/checking a radio button, all you need is to bind a procedure to it, this is just ONE way:
//js for radio button click
$('input[type="radio"]').on('click', function(){
window.alert($(this).val());
})
<!--html-->
<input type="radio" value="first" name="same"/>
<input type="radio" value="second" name="same"/>
<input type="radio" value="third" name="same"/>

Whether done manually or programmatically, it seems that clicking an already checked radio button does not necessarily have any effect!
Assuming HTML of:
<input type="radio" name="rv_submit" value="delete" id="rb2" checked>
Trigger the required action via jQuery as follows:
$('#rb2').prop('checked', false); // Turn off 'checked' ...
$('#rb2').click(); // ... or click() has no effect

Prevent users to click RadioButton

In my form I have some TextBoxes. Once the value of TextBox is changed then corresponding RadioButton will be selected. But I want to prevent users from changing the value of RadioButton.
I tried disabling like this.
optA.Attributes.Add("disabled", "disabled");
But this script greys out the radiobutton which is not looking good. Is there any script to prevent users from clicking/changing the selected value of radiobutton?
Small example is
totalval=document.getElementById('txt1').value+document.getElementById('txt2').value
if (totalval>101)
document.getElementById('optA1').checked=true;
else if(totalval<100)
document.getElementById('optA2').checked=true;
This is what I want. So the users should not change the value of radiobuttons (optA1,optA2)
if am using
optA1.Attributes.Add("disabled", "disabled");
I couldnt get the value of optA1 at server side.
My aspx code is
<asp:RadioButton ID="optA1" GroupName="optAchieve" runat="server" Text="30" value="30" onclick="indicateColor()" />
<asp:RadioButton ID="optA2" GroupName="optAchieve" runat="server" Text="20" value="20" onclick="indicateColor()" />

Try to prevent user action by onclick event like this :
optA.Attributes.Add("onclick", "return false;");

You have to right javascript on radio button click , no matter what the radio option is selected always select the default option from javascript.

Attach a readonly class and change attribute of radio button to unchecked on each click.
<input type="radio" id="radio1" name="radio" class="readonlyradio">
<input type="radio" id="radio2" name="radio" class="readonlyradio">​
Use this function in your JS:
$(".readonlyradio").click(function(){
$(this).attr('checked', false);
});​
Check this fiddle:http://jsfiddle.net/Xwtvp/
Hope it helps.

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.