CODEWITHSUNDEEP
jquery
user46785
user46785

Reputation: 571

Disabling radio buttons with jQuery

I'm trying to disable these radio buttons when a the loadActive link is clicked but for some reason it only disables the first in the order and then skips the rest.

<form id="chatTickets" method="post" action="/admin/index.cfm/">
    <input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
    <input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
<a href="#" title="Load ActiveChat" id="loadActive">Load Active</a>

And Here is the jquery i'm using:

jQuery("#loadActive").click(function() {
    //I have other code in here that runs before this function call
    writeData();
});
function writeData() {
    jQuery("input[name='ticketID']").each(function(i) {
    jQuery(this).attr('disabled', 'disabled');
});
}

Upvotes: 57

Views: 238490

Answers (7)

Saddam Khan
Saddam Khan

Reputation: 171

You can try this code.

var radioBtn = $('<input type="radio" name="ticketID1" value="myvalue1">');
if('some condition'){
    $(radioBtn).attr('disabled', true); // Disable the radio button.
    $('.span_class').css('opacity', '.2'); // Set opacity to .2 to mute the text in front of the radio button.
}else{
    $(radioBtn).attr('disabled', false);
    $('.span_class').css('opacity', '1');
}

Upvotes: 3

mostafaznv
mostafaznv

Reputation: 988

just use jQuery prop

 $(".radio-button").prop("disabled", false);
 $(".radio-button").prop("disabled", true); // disable

Upvotes: 12

KCOtzen
KCOtzen

Reputation: 896

Remove your "each" and just use:

$('input[name=ticketID]').attr("disabled",true);

That simple. It works

Upvotes: 65

ranonE
ranonE

Reputation: 497

code:

function writeData() {
    jQuery("#chatTickets input:radio[id^=ticketID]:first").attr('disabled', true);
    return false;
}

See also: Selector/radio, Selector/attributeStartsWith, Selector/first

Upvotes: 2

karim79
karim79

Reputation: 342765

I've refactored your code a bit, this should work:

jQuery("#loadActive").click(writeData);

function writeData() {
    jQuery("#chatTickets input:radio").attr('disabled',true);
}

If there are more than two radio buttons on your form, you'll have to modify the selector, for example, you can use the starts with attribute filter to pick out the radios whose ID starts with ticketID:

function writeData() {
    jQuery("#chatTickets input[id^=ticketID]:radio").attr('disabled',true);
}

Upvotes: 53

geowa4
geowa4

Reputation: 41853

I just built a sandbox environment with your code and it worked for me. Here is what I used:

<html>
  <head>
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <form id="chatTickets" method="post" action="/admin/index.cfm/">
      <input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
      <input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
    </form>
    <a href="#" title="Load ActiveChat" id="loadActive">Load Active</a>

    <script>
      jQuery("#loadActive").click(function() {
        //I have other code in here that runs before this function call
        writeData();
      });
      function writeData() {
        jQuery("input[name='ticketID']").each(function(i) {
            jQuery(this).attr('disabled', 'disabled');
        });
      }
    </script>
  </body>
</html>

I tested in FF3.5, moving to IE8 now. And it works fine in IE8 too. What browser are you using?

Upvotes: 3

mkoryak
mkoryak

Reputation: 57998

First, the valid syntax is

jQuery("input[name=ticketID]")

second, have you tried:

jQuery(":radio")

instead?

third, why not assign a class to all the radio buttons, and select them by class?

Upvotes: 9

Related Questions