Disabling radio button after click

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 cl开发者_运维知识库icks 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');
 }