How to gray out a button when file is not chosen

Question

I already managed to disable the button when file to upload is not chosen, but I want to change how it looks when it is disabled/enabled (btn-secondary, btn-primary)

I tried to change the .css file but it didn't work for me

I just want the button to be gray when no file is selected like here: https://getbootstrap.com/docs/4.0/components/buttons/ btn-scondary

$(document).ready(function() {
  $('input:file').change(function() {
    if ($(this).val()) {
      $('input:submit').attr('disabled', false);
    }
  });
});

.disabled {
  color: #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td width="30%">
  <input type="file" name="file" id="profile-img" />
</td>
<td width="30%" align="left">
  <input type="submit" name="upload" class="btn btn-primary" value="Upload" disabled>
</td>

לבני מלכה · Answer 1 · 2019-05-23T11:31:12.267

Use [attr] in css to select DOM by attribute

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);
                }
            }
        );
    });

input[disabled] {
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="file" id="profile-img"/>
<input type="submit" name="upload" class="btn btn-primary" value="Upload" disabled>

EDIT TO YOUR COMMENT

I tried adding background-color: darkgray; but it didn't work

Because you use bootstrap you need to override backround by using !important

$(document).ready(
  function() {
    $('input:file').change(
      function() {
        if ($(this).val()) {
          $('input:submit').attr('disabled', false);
        }
      }
    );
  });

input[disabled] {
  color: red;
  background: darkgray!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<input type="file" name="file" id="profile-img" />
<input type="submit" name="upload" class="btn btn-primary" value="Upload" disabled>

OR

Using !important is not really good. So you can change the order of your style sheets links

or set a specific id to the input and use it in css :

$(document).ready(function() {
  $('input:file').change(function() {
    if ($(this).val()) {
      $('input:submit').attr('disabled', false);
    }
  });
});

#btn-uplaod[disabled] {
  color: red;
  background: darkgray;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<input type="file" name="file" id="profile-img" />
<input type="submit" name="upload" class="btn btn-primary" id="btn-uplaod" value="Upload" disabled>

It works but css changes only font colour, is there a way to change button backgroud colour? I tried adding background-color: darkgray; but it didn't work — S0ul3r, May 23 '19 at 11:15
Yeah I already tried that, but it doesn't change the colour of background. I think it is because I use button templates from bootstrap btn-primary. — S0ul3r, May 23 '19 at 11:21
`you need to override backround by using !important` not really. You can use a more specific selector. For eg `input[disabled].btn-primary { styles }` would work. We should refrain from using `!important`. Use it only when absolutely necessary. — Mihai T, May 23 '19 at 11:25
@MihaiT LOLLL but that exactly my edit(In the second you comment I edit my answer) — לבני מלכה, May 23 '19 at 11:26
your edit says `set a spesific class to the input and use it in css` . It already has a specific class from bootstrap. I guess all the btn-primary that will be disabled will have these styles. So it's safe to use that bootstrap class to be specific in your css selector. — Mihai T, May 23 '19 at 11:28

score 0 · Answer 2 · answered May 23 '19 at 11:11

0

Please find the below link: https://jsfiddle.net/ulric_469/01d59ezs/1/

$(document).ready(function() {
  $('input:file').change(function() {
    if ($(this).val()) {
      $('input:submit').attr('disabled', false).removeClass("disabled");
    } else {
        $('input:submit').attr('disabled', true).addClass("disabled");
    }
  });
});

answered May 23 '19 at 11:11

Mangesh

365
2
8

1

why share a jsFIddle when you can add a code snippet directly in your answer ? :) – Mihai T May 23 '19 at 11:19
I am newbie here :P I will explore this thing. thanks for pointing. – Mangesh May 23 '19 at 11:20
1

No problem :) there's a `<>` symbol in the toolbar when you edit/add your answer. Using that will open a code snippet. read more here -> [stack snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) – Mihai T May 23 '19 at 11:22

score 0 · Answer 3 · answered May 23 '19 at 11:31

I managed to solve this issue by adding custom class to my button, and defining it in style.css file:

<input type="submit" name="upload" class="btn btn-primary upload-disabled" value="Upload" disabled>

.upload-disabled:disabled {
    background-color: darkgray;
    border-color: darkgray;
}

How to gray out a button when file is not chosen

3 Answers3