我已经设法在未选择要上传的文件时禁用该按钮,但我想更改它在禁用/启用时的外观(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>
最佳答案
使用[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>
关于jquery - 未选择文件时如何使按钮变灰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56273864/