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

@user , remove the inline click event , the code will be much cleaner — kobe, May 05 '11 at 03:45
i got it working thanks to every for taking time and answering my question love you all thanks again — user735205, May 05 '11 at 04:50

score 1 · Accepted Answer · answered May 05 '11 at 03:41

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.

answered May 05 '11 at 03:41

Edgar Villegas Alvarado

18,204
2
42
61

Getting the name attribute and doing another selection is kind of redundant isn't it? Why not `$(this).attr("disabled",true);`? (Or `.attr("disabled","disabled")`) – nnnnnn May 05 '11 at 03:47
@nnn, it's not redundant, cause the second selector will return many objects (radio names are not unique) – Edgar Villegas Alvarado May 05 '11 at 07:02
@Edgar - you're right, sorry, I missed that the point was to disable the whole group of radios. – nnnnnn May 06 '11 at 02:25

kobe · Answer 2 · 2011-05-05T03:54:38.967

1

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

edited May 05 '11 at 03:54

answered May 05 '11 at 03:42

kobe

15,671
15
64
91

No, doesn't work, it only disables current radio, not related radios as userXX asked. – Edgar Villegas Alvarado May 05 '11 at 07:03

score 1 · Answer 3 · answered May 05 '11 at 03:44

1

Using Javascript, you can use a solution like this:

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

answered May 05 '11 at 03:44

Jesufer Vn

13,200
6
20
26

Mohsen · Answer 4 · 2011-05-05T03:44:09.897

0

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>

edited May 05 '11 at 03:44

answered May 05 '11 at 03:40

Mohsen

64,437
34
159
186

where do i put that code i already have one onclick function **update(result)** – user735205 May 05 '11 at 03:46
you can include it in your onclick, but inline javascript is not recommended. If you are writing a big project don't do that :) – Mohsen May 05 '11 at 03:49
@user , check my fiddle example – kobe May 05 '11 at 03:54

score 0 · Answer 5 · answered May 05 '11 at 03:56

0

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




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

answered May 05 '11 at 03:56

Atticus

6,585
10
35
57

No prob -- this is more so to disable the one that was clicked, not sure if you were looking for that single one or the entire collection, otherwise I agree with the others on doing ":radio" selectors – Atticus May 05 '11 at 08:24

Disabling radio button after click

5 Answers5

Linked