2012-07-31 19 views
13

Sto usando JavaScript per disabilitare un pulsante. Funziona bene in IE, ma non in Firefox e Chrome, ecco il copione quello su cui sto lavorando:document.getElementById ('btnid'). Disabled non funziona in firefox e chrome

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

E nel mio html ho:

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

Niente di sbagliato in questo. In che modo non funziona? – Utkanos

+0

Button disable e enable sta funzionando bene in IE. Ma nulla sta accadendo in Firefox e Chrome. In questi due browser il pulsante non sta facendo altro che abilitato. – steeve

+0

@Spencer: usa 'setAttribute()' e 'removeAttribute()' come indicato nella mia risposta di seguito. –

risposta

33

uso setAttribute() e removeAttribute()

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

SEE DEMO

+0

@AK: Il tuo violino funziona bene in ff e chrome, ma nella mia pagina, lo stesso problema è il rendering ... Ora sono indifferente :( – steeve

+0

puoi condividere il codice completo? –

+0

@AK: Huh ... È ora sto lavorando bene, ho ribattezzato il nome della funzione, funziona ora, sembra interessante ... (il mio vecchio nome funzione è getSelection, non so che cosa non vada bene con questo nome) Grazie mille A K ... :) – steeve

0

Ci sono sempre problemi strani con il browser supporto di getElementById, provare a utilizzare il seguente comando:

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

in alternativa, abbracciare jQuery in cui si può semplicemente fare questo:

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

"Ci sono sempre strani problemi con il supporto del browser di getElementById" - Ya? Wha? È una delle parti più coerentemente implementate delle specifiche! ... a differenza di getElementsBySelector di cui il mio browser non sa nulla. – Quentin

+0

E se quel codice jQuery funziona davvero, allora la mia antipatia per la libreria è appena salita. Entrambi sono valori non validi per l'attributo, ma il ripristino degli errori dovrebbe considerare l'impostazione dell'attributo disabilitato su "falso" come se fosse impostato su "disabilitato". – Quentin

+0

@Questin hai assolutamente ragione, il mio codice non era corretto (il risultato di starnutire un'idea senza previo pensiero) ho apportato le correzioni. –

3

impostando il disabled attributo direttamente Prova:

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

Qualche tempo alcune funzioni javascript non funziona su alcuni browser specifico. Vorrei suggerire di iniziare a utilizzare JQuery, che vi dà JS normalizzati, avendo cura di esigenza altro browser

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

rimanere fedele alla nativa (Boolean) sostegno proprietà e la sua sintassi potente come:

[elem ] .disabled = condizione? vero falso; // done!

e per la nostra buona esperienza di codifica collettiva, - per favore insistere sugli altri per sostenerlo pure.

0

Un'altra alternativa:

document.formname.elementname.disabled=true 

I lavori per FF e IE! :)

-1

Ho provato tutte le possibilità. Niente ha funzionato per me tranne il seguente. var element = document.querySelectorAll ("input [id = btn1]"); element [0] .setAttribute ("disabled", true);

Problemi correlati