jquery - 未选择文件时如何使按钮变灰

Question

我已经设法在未选择要上传的文件时禁用该按钮，但我想更改它在禁用/启用时的外观(btn-secondary，btn-primary)

我尝试更改 .css 文件，但它对我不起作用

我只希望当没有选择文件时按钮呈灰色:https://getbootstrap.com/docs/4.0/components/buttons/btn中学

$(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

使用[attr] in css通过属性选择 DOM

$(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>

编辑您的评论

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

因为您使用 Bootstrap ，所以您需要使用 !important 覆盖 backround

$(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>

或

使用 !important is not really good .所以你可以改变the order of your style sheets links

或设置 specific id 到 input 并在 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>