一旦进度条达到100%,我就试图让提交按钮显示出来。当选择两个下拉菜单中的每一个时,进度条的值会增加,并且会选择后续复选框。这是条形图和按钮的div:
<div id="submitContainer" align="center">
<br />
<progress id="progressBar" value="0" max="100"><div class="progressbar"></div></progress>
<br />
<input id="submitButton" type="button" value="Check Trade" onclick="function()" />
</div>
这是增加进度条值的脚本:
var doneA = false;
$('#teamASelect').on('change', function() {
if (!doneA) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+25);
doneA = true;
}
});
var doneB = false;
$('#teamBSelect').on('change', function() {
if (!doneB) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+25);
doneB = true;
}
});
var doneC = false;
$('.checkA').on('change', function() {
if (!doneC) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+25);
doneC = true;
}
});
var doneD = false;
$('.checkB').on('change', function() {
if (!doneD) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+25);
doneC = true;
}
});
var progress = $("#progressBar").attr('value');
这里应该显示提交按钮的脚本......或者我想:
$(document).ready(function () {
$('#submitButton').hide();
});
$('#progressBar').prop('value').on('change', function () {
if (progress > 99) {
$('#submitButton').show();
}
});
我做错了什么?任何帮助是极大的赞赏。谢谢大家!
答案 0 :(得分:0)
您的jQuery代码错误
$('#progressBar').prop('value').on('change', function () {
.prop(xxx)
将返回该属性的值。
您需要删除.prop()
$('#progressBar').on('change', function () {
现在progress
中的if (progress > 99) {
是什么?你不应该读这个价值吗?
if (this.value > 99) {
$('#progressBar').on('change', function () {
if (this.value > 99) {
$('#submitButton').show();
}
});
并在JS中设置值不会触发更改,因此您需要触发它
$("#progressBar").attr('value', $("#progressBar").prop('value')+25).trigger("change");