iOS Safari <pulsante disattivato></button> non disabilita?

Question

Stavo controllando un modulo che ho creato sul mio iPad e sembra che l'aggiunta di disabled a un tag <button> non disabiliti il ​​pulsante.

L'aggiunta di disabled a un tag <input> funziona ma non <button>.

Così

<input type = "text" disabled />

opere, ma

<button disabled>Hola</button>

non lo fa. Pensieri su come risolvere questo problema? O è solo un bug di safari?

Answer 1

È possibile utilizzare l'attributo disabled su un tag <input /> ma non su un tag <button />. Button non è ufficialmente ammortizzati, ma perché si può fare

<input type="submit" value="Click Me"> 

per le funzionalità di invio del modulo e

<input type="button" value="Click Me"> 

per un pulsante generica plain-old non v'è alcun vero e proprio punto di avere un intero tag diverso. Inoltre è possibile disattivare sia un pulsante regolare invio e con l'aggiunta di disabled

<input type="submit" value="You can't Click Me" disabled> 
<input type="button" value="Click Me" disabled> 

Answer 2

Ho controllato questo sul mio iPad residenziale. Hai ragione che il tag button non funziona, ma questi:

<input type="button" value="Go on, click me!"> 

e

<input type="submit" value="Go on, click me!"> 

Spero che risolve il problema. Qualsiasi cosa tu possa fare con un <button></button>, puoi farlo con uno <input type="button"> o <input type="submit">. Deve essere un bug di Safari iOS.

EDIT:

Button fa accettare disabled in Chrome, così ho colpa Safari su iOS.

EDIT:

Vedi Fiddle.

Answer 3

Questo bug ISO Safari è terribile. L'IPad supporta il tag di intermittenza? Per quanto ne sappia, non puoi davvero dare uno stile ai numeri <input> come puoi a <button>. Quindi se hai un con uno in stile o <img> nella parte che button, <input> non è la strada da percorrere. Invece fingilo, fai in modo che il tuo pulsante si comporti come se avesse l'attributo 'disabilitato'.

Aggiungere una classe al pulsante:

<button class='ipad-disabled'></button>

quindi verificare se tale pulsante è quella classe di 'ipad-disabile', se lo fa, non accadrà nulla quando si fa clic su tale pulsante:

$('button').on('click', function() { 
    if (!$(this).hasClass('ipad-disabled')) { 
     doSomething(this); 
    } 
}); 

Poi, quando è necessario il <button> da abilitare rimuovere il 'ipad-disabled' classe:

$('button').removeClass('ipad-disabled');