Disabling radio button after click

Question

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

Answer 1

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.

Answer 2

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');

Answer 3

Using Javascript, you can use a solution like this:

    document.getElementById("IDOfButtonElement").onclick = function(){
        document.getElementById("IDOfButtonElement").disabled=true;
    }

Answer 4

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>

Answer 5

onclick="update('ad', this);"




function onclick(word, element){
    $(element).attr('disabled', 'disabled');
 }