1

I am disabling a input file button in JQuery which works

$('#ID').attr('disabled', true)

However, the button still looks enabled and doesn't show the disabled style (grey)

I have tried changing the CSS

// Example 
$('#ID').css("background-color", 'yellow')

But regardless of what css I put the button never changes style.

What I can do?

the object I am using (HTML)

<input type="file" id="ID" class="" name="files[]" multiple />

Thanks

user3428422
  • 3,721
  • 10
  • 45
  • 104
  • Under what circumstances are you disabling the button? This seem to work fine - http://codepen.io/Paulie-D/pen/JKEKmE – Paulie_D Jun 24 '16 at 09:58
  • What browser is this? It looks greyed out disabled in chrome and firefox to me. Maybe try and restyle the whole thing to get a dramatic result - http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ – dmoo Jun 24 '16 at 09:59
  • @Paulie_D - I need the button disabled when the user is on a tablet, phone, device etc. its strange your example shows it more "greyed out" then what I see in Chrome. Cheers – user3428422 Jun 24 '16 at 10:27
  • @user3428422 http://www.quirksmode.org/dom/inputfile.html – Gautam Jha Jun 24 '16 at 10:31

3 Answers3

1

Use prop instead attr:

 $("#id").prop("disabled",true);

https://jsfiddle.net/8fvga3xk/8/

Germano Plebani
  • 3,164
  • 3
  • 24
  • 36
1

Sorry for previous answer.

I suggest you to check this link to know possibility about changing a input file style.

div.fileinputs {
 position: relative;
}

div.fakefile {
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 1;
}

input.file {
 position: relative;
 text-align: right;
 -moz-opacity:0 ;
 filter:alpha(opacity: 0);
 opacity: 0;
 z-index: 2;
}
<div class="fileinputs">
 <input type="file" class="file" disabled/>
 <div class="fakefile">
  <input disabled/>
  <img src="http://fptp.uthm.edu.my/mba/images/911c660826c0b.png"  style="width:30px;"/>
 </div>
</div>

instead of true you can use disabled;

$("#ID").attr('disabled','disabled');

or you can use .prop()

$("#ID").prop('disabled', true);
$("#ID").prop('disabled', false);
Gautam Jha
  • 1,370
  • 1
  • 10
  • 23
-1

You can use the CSS selector :disabled http://www.w3schools.com/cssref/sel_disabled.asp

.yourButtonClass:disabled{
   background-color:#dddddd;
}
Maxime Girou
  • 1,415
  • 2
  • 11
  • 26