javascript - FireFox handling of disabled fields - Stack Overflow

admin管理员组

文章数量:1400807

I have an HTML form with a select list and a radio button, both of which are initially set with disabled = true. At some point, these elements are enabled via JavaScript (i.e., disabled = false). This works fine in IE and Chrome, but in FireFox the element remains disabled. It appears to be enabled, but doesn't respond to mouse clicks. When I inspect one of the elements using FireBug, the disabled attribute is false. Are there known issues with FireFox when dealing with form elements that are initially disabled, then enabled?

Thanks.

I have an HTML form with a select list and a radio button, both of which are initially set with disabled = true. At some point, these elements are enabled via JavaScript (i.e., disabled = false). This works fine in IE and Chrome, but in FireFox the element remains disabled. It appears to be enabled, but doesn't respond to mouse clicks. When I inspect one of the elements using FireBug, the disabled attribute is false. Are there known issues with FireFox when dealing with form elements that are initially disabled, then enabled?

Thanks.

• javascript
• html
• firefox

Share Improve this question Follow asked Nov 10, 2009 at 20:33 newdayrisingnewdayrising 3,79244 gold badges2828 silver badges3131 bronze badges 3

• 1 How are you re-enabling the elements? Could you post some code for us to see? – Buggabill Commented Nov 10, 2009 at 20:58
• are you sure its not this error? stackoverflow./questions/3004885/… – meo Commented Jun 2, 2012 at 9:47
• possible duplicate of Bug With Firefox - Disabled Attribute of Input Not Resetting When Refreshing – Liam Commented Mar 26, 2014 at 10:09

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

I was able to resolve this issue by using jQuery to set and remove the disabled attribute rather than setting it directly. I'm not sure what it does under the hood to make it work.

$(control).attr('disabled', 'disabled');
$(control).removeAttr('disabled');

After breaking my head over for 4 hours, here is what worked for me:

document.getElementById(ID).disabled = true|false;                // this works only in IE
document.getElementbyId(ID).setAttribute('disabled', true|false); // This works both in IE\FF

Works for me:

<select id="a" disabled="true">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<script type='text/javascript'>
document.getElementById('a').disabled=false
</script>

I've been grappling with the same issue. I'm still testing but found wrapping the form element in a span/div tag and attaching onclick to the span/div (with padding) seems to work. The only remaining issue is to set the z-index to overlay the input and change it after click so it's underneath the form input (not sure if that's possible - I don't like reading docs).

    function edit(ID) {
        // need to add previous field code and set disabled to true
        document.getElementById(ID).disabled=false
        document.getElementById(ID).focus();
    }

//Begin Body Code

<form name="theform"><table><tr><td><span style="padding:5px;border:1px solid black;" onclick="edit('myId1');"><input  onclick="edit();"   disabled id="myId1" type="text"" value="Value One" /></span></td></tr></form>

//End Body Code

I've always used...

document.getElementById(ID).disabled="disabled"

...and...

document.getElementById(ID).disabled=""

...instead of true/false. Have you tried that?

本文标签： javascriptFireFox handling of disabled fieldsStack Overflow