document.getElementById('btnid').disabled no funciona en Firefox y 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" />

preguntado el 31 de julio de 12 a las 10:07

Nothing wrong with that. In what way does it not work? -

Button disable and enable is working fine in IE. But nothing is happening in Firefox and chrome. In these two browsers the button is doing nothing but enabled. -

@Spencer: use setAttribute() y removeAttribute() as given in my answer below. -

7 Respuestas

utilizan el setAttribute () y removeAttribute ()

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

VER DEMO

Respondido 31 Jul 12, 11:07

@AK: Your fiddle is working fine in ff and chrome, But in my page, the same issue is rendering... I am clueless now :( - Steeve

@A K: Huh... It is working fine now. I have renamed the function name. It is working now. Seems interesting...(My old function name is getSelection. I dont know wha's wrong with this name). Thanks a lot A K... :) - Steeve

nota al margen: it's worth to mention that the disabled attribute is actually a boolean value. If the attribute exists, it will disable the button. Thus, the following is working as well: document.getElementById('btn1').setAttribute('disabled', 'true');... and you can replace true with any other values (though it might be misleading in some cases) - Raptor

Intente configurar el disabled atributo directamente:

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

Respondido 31 Jul 12, 11:07

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

Respondido 31 Jul 12, 11:07

"There are always weird issues with browser support of getElementById" — Ya? Wha? It's one of the most consistently implemented parts of the spec! … unlike getElementsBySelector which my browser doesn't know about. - Quentin

And if that jQuery code actually works, then my dislike of the library has just gone up. Both of those are invalid values for the attribute, but error recovery should treat setting the disabled attribute to "false" the same as setting it to "disabled". - Quentin

@Quentin you're absolutely right, my code was incorrect (the result of sneezing out an idea without prior thought) I have made the corrections. - Paul Aldred-Bann

@Quentin and again after further reading it seems getElementsBySelector (something that was recommended to me a while ago, but I've never used) is part of prototype.js! I'll leave this post here for the sake of "extra" information - but yes I agree it's not an ideal answer. - Paul Aldred-Bann

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.

Respondido 16 Feb 14, 13:02

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

Respondido 31 Jul 12, 11:07

Otra alternativa:

document.formname.elementname.disabled=true

Work on FF and IE ! :)

Respondido 04 Abr '16, 10:04

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

respondido 19 nov., 16:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.