Question

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

我试图更改.css文件，但对我而言不起作用

我只希望在没有选择文件的情况下将按钮显示为灰色，例如：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

使用[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>

编辑您的评论

我尝试添加background-color：深灰色；但这没用

由于使用引导程序，因此需要使用backround覆盖!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

使用!important is not really good。因此，您可以更改the order of your style sheets links

或将id设置为specific 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>

Answer 2

请找到以下链接： 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");
    }
  });
});

Answer 3

我设法通过向按钮中添加自定义类，并在style.css文件中对其进行定义来解决此问题：

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

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

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

3 个答案: