Add disabled style (css) to input type file button

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

Under what circumstances are you disabling the button? This seem to work fine - codepen.io/Paulie-D/pen/JKEKmE — Paulie_D
– 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.net/codrops/2015/09/15/… — dmoo
– 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
– user3428422, Commented Jun 24, 2016 at 10:27

Germano Plebani · Accepted Answer · 2016-06-24 10:09:11Z

1

Use prop instead attr:

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

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

edited Jun 24, 2016 at 10:09

answered Jun 24, 2016 at 10:00

Germano Plebani

3,6753 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gautam Jha · Accepted Answer · 2016-06-24 10:30:03Z

0

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

edited Jun 24, 2016 at 10:30

answered Jun 24, 2016 at 10:10

Gautam Jha

1,4831 gold badge15 silver badges26 bronze badges

Comments

Maxime Girou · Accepted Answer · 2020-10-28 13:39:04Z

-1

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

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

edited Oct 28, 2020 at 13:39

answered Jun 24, 2016 at 9:58

Maxime Girou

1,5703 gold badges18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Add disabled style (css) to input type file button

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related