I need some help please
This is the html
<div>
<p>match1</p>
teamA <input type="radio" name="match1" onclick="update('ab');" />
teamB <input type="radio" name="match1" onclick="update('ba');" />
<p>match2</p>
teamC <input type="radio" name="match1" onclick="update('ad');" />
teamD <input type="radio" name="match1" onclick="update('dc');" />
</div>
<script>
update(results){.................}
</script>
I have this html so what I want I to know is
How can I disable the radio button once the user clicks on it
because the update() function changes the values when user clicks on radio button
if he keeps clicking like that then values change each time he clicks
or if he clicks on sibling radio button
so please can anyone tell me how to disable radio button
once user clicks on it
like for instance in match1
if user selects teamA radio button then i want to disable both teamA and teamB radio buttons
same for match2 if he clicks then disable the clciked radio and sibling radio aswell
Thanks for reading this can anyone help me please
I can use plain js, jquery or libraries
Use this:
$(":radio").click(function(){
var radioName = $(this).attr("name"); //Get radio name
$(":radio[name='"+radioName+"']").attr("disabled", true); //Disable all with the same name
});
What we're doing, is, when a user clicks a radio button, disable all radios with the same name.
Hope this helps.
Cheers.
Using Javascript, you can use a solution like this:
document.getElementById("IDOfButtonElement").onclick = function(){
document.getElementById("IDOfButtonElement").disabled=true;
}
jsfiddle example
http://jsfiddle.net/nhZXg/
code
$(":radio").click(function(){
$(this).attr('disabled','disabled');
});
this is the general way of doing it.
jQuery("input:radio").attr('disabled',true);
or
jQuery("input:radio").attr('disabled','disabled');
Try this:
this.setAttribute('disabled','disabled');
I suggest you to add label tag around your inputs. It cause when user clicks on the text radio button changes.
<label>teamA <input type="radio" name="match1" onclick="update('ab');" /></label>
onclick="update('ad', this);"
function onclick(word, element){
$(element).attr('disabled', 'disabled');
}
Related
I have a HTML page where I have few checkboxes which look Iike radio buttons, i want the user to be able to check/uncheck the checkboxes using the keyboard?what should I include to achieve this functionality, I have been using aria attributes in my code but still not able to achieve it!
This will do the trick for any key pressed. You may want to add checking a specfic keycode on the event:
$(function(){
$('[type=checkbox]').keypress(function(e){
$(this).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
document.getElementById('focused').focus();
<input type="checkbox" id="focused">Hit space
the change function catch only if radio is checked but not when its unchecked. Why? Should it behave like that? When I click the radio button the other is unchanging so the event should fire, right? Below is the code and jsfiddle. Do I do anything wrong?
HTML:
Option1 <input type="radio" name="choice" id="op1" checked/>
Option2 <input type="radio" name="choice" id="op2"/>
<br><br>
<span id="sp1">Option1</span><br>
<span id="sp2" style="display: none;">Option2</span>
Javascript:
var op2 = $('#op2');
var sp1 = $('#sp1');
var sp2 = $('#sp2');
op2.change(function(){
if(op2.is(':checked')){
sp1.hide();
sp2.show();
}
else{
sp2.hide();
sp1.show();
}
});
You can run your event handler when either checkbox changes:
$('#op2, #op1').change(...
Here's a demo: http://jsfiddle.net/TCt82/
Another way to select this would be by element name since both checkboxes need to have the same name attribute. Selecting by ID will be faster (although you won't be able to see the difference).
UPADTE
If anyone knows the exact reason the change event does not fire on a checkbox after it's been de-selected, posting it as a comment or answer would be great.
Change your selector to get it using the name
$("input[name='choice']").change(function(){
if(op2.is(':checked')){
sp1.hide();
sp2.show();
}
else{
sp2.hide();
sp1.show();
}
});
Working sample http://jsbin.com/UPILuCe/1
I have a set of two radio buttons having same id
<input type="radio" id="rad" name="mode"value="test" />test
<input type="radio" id="rad" name="mode" value="dev"/>dev
user have to select any one of the radio button.so while validating if second radio is selected the following validation alerts always.
if ($('#rad').prop('checked') != true ) {
alert(' Please Choose mode!!')
return false;
}
I only have to alert if user did not select any one of them.and no need to alert if user selected one radio button.
In my case if user select first radio button it alerts anything but choosing second radio it alerts Please Choose mode.
ID of element uniquely identifies the html element! read this if you keen :) https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really
Also : http://jsfiddle.net/Pkq3B/
have fun, lemme know how it goes!
you could use class like this:
if (!$('.rad').is(':checked')) {
alert(' Please Choose mode!!')
return false;
}
html
<input type="radio" class="rad" name="mode"value="test" />test
<input type="radio" class="rad" name="mode" value="dev"/>dev
Try to use length of checked radio buttons like,
if (!$('input[name="mode"]:checked').length) {
alert(' Please Choose mode!!')
return false;
}
Working demo
You don't need jQuery for that purpose. You can use pure JavaScript:
if((document.getElementById('rad').value!='test')||document.getElementById('rad').value!='dev'))
{
alert("please select");
}
I have a function using jquery that updates a form when an image is click.
I need to add to that function so that a specified radio button is selected.
How can I select a radio button using jquery please?
UPDATE:
I'll explain further...I have overlayed an image and hid the radio button...so what the user clicks on an image it will check the selected radio.
Here's how each radio looks like:
<label style="display: inline; " for="select_theme_a">
<img src="images/icons/theme1.png" />
<input checked="checked" class="select_control" id="select_theme_a" name="select_theme" type="radio" value="a" onclick="return submitForm();" style="display:none" />
</label>
There's 4 radio buttons .. 4 different images to click on.
Hope this helps
How can I select a radio button using jquery please?
You can use attr method like this:
$('#radio-id').attr('checked', true);
If radio element is inside same parent element as image than you can use this piece of code inside function that handles image click event:
$(this).parent().find(":radio").attr('checked', true);
I need some help.
I have program that changes table values based on user input in radio box
similar to this page:
clicky
But the problem is I want users to select the radio input only once; if they select another
radio then values of tables get messed up.
So what I want to know is how can I make an alert box when user selects the radio input twice?
Similar to this website clicky try clicking radio button twice and alert popsup.
Please can anyone help?
It's difficult to prevent an event on a radio button input node without bringing in help from outside libraries. A simple solution is to just disable the buttons from within an onclick function attached to each input node. Like so: http://jsfiddle.net/c73Mh/ . If they still need to be able to select the radio buttons for whatever reason, you can cancel the selection by selecting the button that was initially selected from within that same function. Hope this helps!
For simplicity in my example I'm assuming that the id of each radio button is a combination of the name and value attributes. In addition to what I've given you below you will need to add a reset() function of some kind that sets selectedValues = {}; and deselects all radio buttons.
<input type="radio" name="group1" value="A" id="group1A" onclick="radioClicked(this);" />First option
<input type="radio" name="group1" value="B" id="group1B" onclick="radioClicked(this);" />Second option
<input type="radio" name="group2" value="A" id="group2A" onclick="radioClicked(this);" />First option
<input type="radio" name="group2" value="B" id="group2B" onclick="radioClicked(this);" />Second option
var selectedValues = {};
function radioClicked(rb) {
if (selectedValues[rb.name] === undefined) {
selectedValues[rb.name] = rb.value;
doTableProcessing();
}
else {
alert("You can't change the selected values");
document.getElementById(rb.name + selectedValues[rb.name]).checked = true;
}
}