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

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

• javascript
• jquery
• css

• Under what circumstances are you disabling the button? This seem to work fine - codepen.io/Paulie-D/pen/JKEKmE – Paulie_D Commented Jun 24, 2016 at 9: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 - tympanus/codrops/2015/09/15/… – dmoo Commented Jun 24, 2016 at 9: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 Commented Jun 24, 2016 at 10:27
• @user3428422 quirksmode/dom/inputfile.html – Gautam Jha Commented Jun 24, 2016 at 10:31

3 Answers 3

Use prop instead attr:

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

https://jsfiddle/8fvga3xk/8/

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

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

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