How do you enable a disabled radio button using jquery in ie7

Question

This works in Firefox. How can I make it work in IE7?

$( '#addressSection input:radio' ).attr( 'disabled', false );

I've also tried these to no avail:

$( '#addressSection input:radio' ).removeAttr( "disabled" );

$( '#addressSection input:radio' ).attr( 'disabled', 'false' );

$( '#addressSection input:radio' ).attr( {disabled: false} );

$( '#addressSection input:radio' ).attr( {disabled: 'false'} );

Here's the radio button html as it is rendered by IE7. The original is written in Spring and custom tags.

<div id="addressSection">
  <div class="column">
    <ul class="simpleForm">
      <li>
        <input id="addressUseUorA" name="addressUseUorA" value="U" type="radio" type="text" value=""/>
        <label for="addressUseUorA">Use User Address</label>
        <input id="addressUseUorA" name="addressUseUorA" value="A" type="radio" type="text" value=""/>
        <label for="addressUseUorA">Use Account Address</label>
     </li>
   </ul>
 </div>
</div>

UPDATE:

Here's what was causing the issue.

I disabled the field like this, trying to disable all fields in the DIV:

$( '#addressSection' ).attr( 'disabled', true);

This causes an issue in ie7, but not firefox.

The issue was resolved when I changed the disable code to:

$( '#addressSection input' ).attr( 'disabled', true);

my guess is that the disable attribute was applied to the div and not the field and so could not be removed by referencing the radio button.

Thanks for all of the help.

Answer 1

did you try:

$( '#addressSection input[type="radio"]' ).removeAttr( "disabled" );

Answer 2

Try:

$('#addressSection input[type=radio]').attr('disabled', false);

Answer 3

I've just give it a test on JsFiddle and looks like removeAttr is working just fine on chrome/FF/IE7.

here is the live sample link: http://jsfiddle.net/2GpyQ/1/

let me know if it worked for you, Thanks

Answer 4

You need to use a different ID for input elements. This code is working:

<div id="addressSection"> <div class="column"> 
    <ul class="simpleForm"> 
        <li> 
            <form>
            <input id="addressUseUorA1" name="addressUseUorA" value="U" type="radio" type="text" disabled="disabled" value=""/> 
            <label for="addressUseUorA1">Use User Address</label> 
            <input id="addressUseUorA2" name="addressUseUorA" value="A" type="radio" type="text" value=""/> 
            <label for="addressUseUorA2">Use Account Address</label> 
            </form>
            <a href="#">click</a>
        </li> 
    </ul> 
</div> </div>
<script>
$('#addressSection a').click(function(e) {
    e.preventDefault()
    $( '#addressSection input[type="radio"]' ).removeAttr( "disabled" );
});
</script>