6

I was checking out a form I made on my iPad and it appears that adding disabled to a <button> tag doesn't actually disable the button.

Adding disabled to an <input> tag works but not <button>.

So

<input type = "text" disabled />

works, but

<button disabled>Hola</button>

doesn't. Thoughts on ways to fix this? Or is it just a safari bug?

Nick Chapman
  • 4,402
  • 1
  • 27
  • 41

3 Answers3

4

You can use the disabled attribute on an <input /> tag but not a <button /> Tag. Button isn't officially depreciated but because you can do 

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

for form submission capabilities and 

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

for a generic plain-old button there is no real point to having a whole different tag. Furthermore you can disable both a submit and a regular button by adding disabled

<input type="submit" value="You can't Click Me" disabled>
<input type="button" value="Click Me" disabled>
edhurtig
  • 2,331
  • 1
  • 25
  • 26
3

This iOS Safari bug is terrible. Does the IPad support the blink tag? As far as I know you really can't style <input>'s like you can <button>'s. So if you have a <button> with <span>'s that are styled or <img>'s in side that button, <input> is not the way to go. Instead fake it, make your button behave like it has the attribute 'disabled'.

Add a class to your button:

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

Then check to see if that button has that class of 'ipad-disabled', If it does, nothing will happen when you click that button:

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

Then when you need the <button> to be enabled remove the 'ipad-disabled' class:

$('button').removeClass('ipad-disabled');
Shiny
  • 4,945
  • 3
  • 17
  • 33
punchjay
  • 29
  • 5
0

I checked this on my residential iPad. You're right that the button tag doesn't work, but these do:

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

and

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

I hope that solves your problem. Anything you can do with a <button></button>, you can do with an <input type="button"> or <input type="submit">. It must be an iOS Safari bug.

EDIT:

Button does accept disabled in Chrome, so I blame Safari on iOS.

EDIT:

See Fiddle.

Mr. Shtuffs
  • 127
  • 2
  • 11
  • I didn't think much of it but a friend mentioned it to me and I started to look into it and it does indeed appear to be a full blown bug. No one else is really talking about it or so it seems. I know you can just use `` but this seems like a rather simple feature to have in your browser. Ya know, being compliant with features that were established many many years ago. – Nick Chapman Oct 29 '13 at 02:34
  • @Nick Chapman It's rather unfortunate that in our connected age on the internet (which is magical), we still have to worry about browser compatibility. But, we do. So, you can either just ignore those stupid browsers that screw up or you can try and accommodate them. Typically, the best solution is a compromise. You shouldn't waste your time trying to support Elinks, but do worry about IE because a lot (too many) people still use it. – Mr. Shtuffs Oct 29 '13 at 02:37
  • I hope all of this helps. If you're doing something with disabled buttons, it's best to stick with `` because, as you see, iOS Safari somehow manages to break it. I'll come back tommorow (EST) if you have any further issues/questions. Until then, good night! – Mr. Shtuffs Oct 29 '13 at 02:49