document.getElementById('btnid').disabled is not working in firefox and chrome

问题

I'm using JavaScript for disabling a button. Works fine in IE but not in FireFox and chrome, here is the script what I'm working on:

function disbtn(e) { 
    if ( someCondition == true ) {
       document.getElementById('btn1').disabled = true;
    } else {
       document.getElementById('btn1').disabled = false;
    }

And in my html I have:

<input type="button" id="btn1" value="submit" />

回答1:

use setAttribute() and removeAttribute()

function disbtn(e) { 
    if ( someCondition == true ) {
       document.getElementById('btn1').setAttribute("disabled","disabled");
    } else {
       document.getElementById('btn1').removeAttribute("disabled");
    }
}

SEE DEMO

回答2:

Try setting the disabled attribute directly:

if ( someCondition == true ) {
   document.getElementById('btn1').setAttribute('disabled', 'disabled');
} else {
   document.getElementById('btn1').removeAttribute('disabled');
}

回答3:

There are always weird issues with browser support of getElementById, try using the following instead:

// document.getElementsBySelector are part of the prototype.js library available at http://api.prototypejs.org/dom/Element/prototype/getElementsBySelector/

function disbtn(e) { 
    if ( someCondition == true ) {
        document.getElementsBySelector("#btn1")[0].setAttribute("disabled", "disabled");
    } else {
        document.getElementsBySelector("#btn1")[0].removeAttribute("disabled");
    }    
}

Alternatively, embrace jQuery where you could simply do this:

function disbtn(e) { 
    if ( someCondition == true ) {
        $("#btn1").attr("disabled", "disabled");
    } else {
        $("#btn1").removeAttr("disabled");
    }    
}

回答4:

Some time some javascript functions does not work on some specific browser. I would suggest you to start using JQuery, which gives you normalized JS, taking care of different browser requirement

$('#btn1').each(function(){
    this.disabled = false;
});

回答5:

Another alternative :

document.formname.elementname.disabled=true

Work on FF and IE ! :)

回答6:

stay true to native (Boolean) property support and its powerful syntax like:

[elem].disabled = condition ? true : false; //done!

and for our own good collective coding experience, -please insist on others to support it as well.

回答7:

I've tried all the possibilities. Nothing worked for me except the following. var element = document.querySelectorAll("input[id=btn1]"); element[0].setAttribute("disabled",true);

来源：https://stackoverflow.com/questions/11737512/document-getelementbyidbtnid-disabled-is-not-working-in-firefox-and-chrome

标签

javascript

getelementbyid