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 ==

Solution 1:

use setAttribute() and removeAttribute()

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

SEE DEMO

Solution 2:

Try setting the disabled attribute directly:

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

Solution 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/functiondisbtn(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:

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

Solution 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;
});

Solution 5:

Another alternative :

document.formname.elementname.disabled=true

Work on FF and IE ! :)