0

I wanted to disable the input using the following code that is called when a button is pressed using Bootstrap FileStyle(for reference I used this link Link to the documentation ):

function disableInput(e) {
   $(":file").filestyle({disabled: true});
}

The input is defined as follows:

<input type="file" class="filestyle" required="required" data-buttontext="Browse for new script">

But when disableInput is called, the input is not disabled, does not gray out and the file chooser is still triggered when "Browse for new script" is clicked, even though while debugging I can see it being called on.

Setting the data-disabled="true" attribute of the input works, like in the sample code provided in the documentation under "disabled", but it is not what I need.

Any ideas where I went wrong?

pluralton
  • 65
  • 1
  • 11

1 Answers1

0

This is what the doc says about disabling inputs:

Enables or disables the input text. Type: Boolean, Default: true
Via JavaScript:

  $(":file").filestyle({input: false});

Via data attributes:

  <input type="file" class="filestyle" data-input="false">

{input: false} not {disabled: true}

To make the button look disabled, use CSS How to change color of Bootstrap disabled button?

Community
  • 1
  • 1
myfashionhub
  • 427
  • 3
  • 11
  • The same happened as when I set " { $(":file").prop('disabled', true}); }". It becomes disabled but does not gray out(look disabled). Is there any way of triggering the change of the look too? – pluralton May 11 '17 at 10:47
  • It's kind of unnecessary to use bootstrap filestyle. You can just change the disabled attribute with jquery/Javascript. Try styling the disabled state with CSS http://stackoverflow.com/questions/35818064/how-to-change-color-of-bootstrap-disabled-button/35818211 – myfashionhub May 11 '17 at 10:52