将禁用样式（css）添加到输入类型文件按钮

Question

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

Answer 1

Use prop instead attr:

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

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

Answer 2

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

Answer 3

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

.yourButtonClass:disabled{
   background-color:#dddddd;
}