我正在创建一个多步骤弹出表单，并且只希望在选择输入字段时使 #next 按钮处于事件状态。我已经设法让它适用于复选框和单选字段，但由于某种原因它不适用于文本和文本区域字段。
我使用与复选框和单选字段相同的代码，但不是检查 is(:checked) 我的目标是 .val() != "".
测试时，只有转到.multi-step-section，填写文本字段，返回上一屏幕，然后返回包含该字段的部分，它才有效。我觉得活跃类还在看上一节。
有没有一种方法可以检查以确保在当前情况下检查 input[type="text"] 和 input[type="textarea"] 字段在禁用按钮之前激活屏幕？
完整弹出表单的链接:https://jsfiddle.net/5yd23jah/
$(function() {
$('.multi-form-actions button').on('click', function() {
var el = $(this).attr('id');
var active = $('.multi-step-section.active');
active.add(active.siblings()).removeClass('active');
if (el == 'prev') {
active = active.prev('.multi-step-section').addClass('active');
$('#progressbar > span').css({
'width': $('#progressbar > span').width() / $('#progressbar').width() * 100 - sectionProgress + '%'
});
} else if (el = 'next') {
active = active.next('.multi-step-section').addClass('active');
$('#progressbar > span').css({
'width': $('#progressbar > span').width() / $('#progressbar').width() * 100 + sectionProgress + '%'
});
}
if ((active).find("input[type='radio'], input[type='checkbox']").is(':checked')) {
$('#next').removeAttr('disabled');
} else if ((active).find("input[type='text'], input[type='textarea']").val() != "") {
console.log('not empty');
$('#next').removeAttr('disabled');
} else {
$('#next').attr('disabled', 'disabled');
}
if (active.is(":not(:first-child)")) {
$('#prev').show();
} else {
$('#prev').hide();
}
if (active.is(":last-child")) {
$('#next').hide();
$('#submit').show();
} else {
$('#next').show();
$('#submit').hide();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
<div id="progressbar">
<span></span>
</div>
<div class="steps-inner">
<div class="multi-step-section active" id="step1">
<h3>Question 1</h3>
<p><span class="wpcf7-form-control-wrap radio-185"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Loft</span><input name="radio-185[]" type="checkbox" value="Loft"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Garage ceiling</span><input name="radio-185[]" type="checkbox" value="Garage ceiling"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Floor</span><input name="radio-185[]" type="checkbox" value="Floor"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Ceilings</span><input name="radio-185[]" type="checkbox" value="Ceilings"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Stud walls</span><input name="radio-185[]" type="checkbox" value="Stud walls"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Special project</span><input name="radio-185[]" type="checkbox" value="Special project"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step2">
<h3>Question 2</h3>
<p><span class="wpcf7-form-control-wrap text-465"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text" name="text-465" placeholder="Enter postcode, city or address" size="40" type="text" value=""></span></p>
</div>
<div class="multi-step-section" id="step3">
<h3>Question 3</h3>
<p><span class="wpcf7-form-control-wrap radio-187"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">up to 30m2</span><input name="radio-187" type="radio" value="up to 30m2"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">30-60m2</span><input name="radio-187" type="radio" value="30-60m2"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">60-100m2</span><input name="radio-187" type="radio" value="60-100m2"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">0ver 100m2</span><input name="radio-187" type="radio" value="0ver 100m2"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step4">
<h3>Question 4</h3>
<p><span class="wpcf7-form-control-wrap radio-188"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Ready to go</span><input name="radio-188" type="radio" value="Ready to go"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">In the next couple of months</span><input name="radio-188" type="radio" value="In the next couple of months"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">In a few months</span><input name="radio-188" type="radio" value="In a few months"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step5">
<h3>Question 5</h3>
<p><span class="wpcf7-form-control-wrap radio-189"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Domestic</span><input name="radio-189" type="radio" value="Domestic"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Commercial</span><input name="radio-189" type="radio" value="Commercial"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Construction</span><input name="radio-189" type="radio" value="Construction"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step6">
<h3>Question 6</h3>
<p><span class="wpcf7-form-control-wrap email-871"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" name="email-871" placeholder="Enter your email address" size="40" type="email" value=""></span></p>
<div>
or
</div>
<p><span class="wpcf7-form-control-wrap tel-525"><input aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" name="tel-525" placeholder="Enter your telephone number" size="40" type="tel" value=""></span></p>
</div>
</div>
<div class="multi-form-actions">
<button id="prev" type="button">Back</button><button disabled id="next" type="button">Continue</button><input class="wpcf7-form-control wpcf7-submit multiform-submit" id="submit" type="submit" value="Send"><br>
<input class="sr-only" id="reset" type="reset">
</div>
</div>最佳答案
你的意思是
var active = $('.multi-step-section.active');
var dis = active.find("input[type='radio']:checked").length == 0;
dis = dis && active.find("input[type='checkbox']:checked").length == 0;
dis = dis && active
.find("input:text,textarea")
.map(function(idx, elem) {
return $(elem).val() || null; // beware of valid values of 0 (zero)
}).get().length == 0;
$('#next').prop('disabled', dis);
进度条代码:
$('#pBar').prop("max",$('.multi-step-section').length).val(0); // loading
...
$('#pBar').val(active.index()); // each click on the prev/next
运行示例
// reusable function
function checkInput() {
var active = $('.multi-step-section.active');
var dis = active.find("input[type='radio']:checked").length == 0;
dis = dis && active.find("input[type='checkbox']:checked").length == 0;
dis = dis && active
.find("input:text,textarea")
.map(function(idx, elem) {
return $(elem).val() || null;
}).get().length == 0;
$('#next').prop('disabled', dis);
}
$(function() {
$(":input").on("input", checkInput); // any input
$('#pBar').prop("max",$('.multi-step-section').length).val(0);
$('.multi-form-actions button').on('click', function() {
var el = $(this).attr('id');
var active = $('.multi-step-section.active');
var count = $('.multi-step-section').length;
active.add(active.siblings()).removeClass('active');
if (el == 'prev') {
active = active.prev('.multi-step-section').addClass('active');
} else if (el = 'next') {
active = active.next('.multi-step-section').addClass('active');
}
$('#pBar').val(active.index());
checkInput(); // reset the continue if needed
if (active.is(":not(:first-child)")) {
$('#prev').show();
} else {
$('#prev').hide();
}
if (active.is(":last-child")) {
$('#next').hide();
$('#submit').show();
} else {
$('#next').show();
$('#submit').hide();
}
});
});.multi-step-section {
display: none
}
.active {
display: block
}
#progressbar { background-color:green;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
<div id="progressbar">
<span></span>
</div>
<div class="steps-inner">
<div class="multi-step-section active" id="step1">
<h3>Question 1</h3>
<p><span class="wpcf7-form-control-wrap radio-185"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Loft</span><input name="radio-185[]" type="checkbox" value="Loft"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Garage ceiling</span><input name="radio-185[]" type="checkbox" value="Garage ceiling"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Floor</span><input name="radio-185[]" type="checkbox" value="Floor"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Ceilings</span><input name="radio-185[]" type="checkbox" value="Ceilings"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Stud walls</span><input name="radio-185[]" type="checkbox" value="Stud walls"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Special project</span><input name="radio-185[]" type="checkbox" value="Special project"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step2">
<h3>Question 2</h3>
<p><span class="wpcf7-form-control-wrap text-465"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text" name="text-465" placeholder="Enter postcode, city or address" size="40" type="text" value=""></span></p>
</div>
<div class="multi-step-section" id="step3">
<h3>Question 3</h3>
<p><span class="wpcf7-form-control-wrap radio-187"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">up to 30m2</span><input name="radio-187" type="radio" value="up to 30m2"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">30-60m2</span><input name="radio-187" type="radio" value="30-60m2"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">60-100m2</span><input name="radio-187" type="radio" value="60-100m2"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">0ver 100m2</span><input name="radio-187" type="radio" value="0ver 100m2"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step4">
<h3>Question 4</h3>
<p><span class="wpcf7-form-control-wrap radio-188"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Ready to go</span><input name="radio-188" type="radio" value="Ready to go"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">In the next couple of months</span><input name="radio-188" type="radio" value="In the next couple of months"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">In a few months</span><input name="radio-188" type="radio" value="In a few months"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step5">
<h3>Question 5</h3>
<p><span class="wpcf7-form-control-wrap radio-189"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Domestic</span><input name="radio-189" type="radio" value="Domestic"></label>
</span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Commercial</span><input name="radio-189" type="radio" value="Commercial"></label>
</span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Construction</span><input name="radio-189" type="radio" value="Construction"></label>
</span>
</span>
</span>
</p>
</div>
<div class="multi-step-section" id="step6">
<h3>Question 6</h3>
<p><span class="wpcf7-form-control-wrap email-871"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" name="email-871" placeholder="Enter your email address" size="40" type="email" value=""></span></p>
<div>
or
</div>
<p><span class="wpcf7-form-control-wrap tel-525"><input aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" name="tel-525" placeholder="Enter your telephone number" size="40" type="tel" value=""></span></p>
</div>
</div>
<div class="multi-form-actions">
<button id="prev" type="button">Back</button><button disabled id="next" type="button">Continue</button><input class="wpcf7-form-control wpcf7-submit multiform-submit" id="submit" type="submit" value="Send"><br>
<input class="sr-only" id="reset" type="reset">
</div>
</div>
<progress id="pBar" value="0">70 %</progress>关于javascript - 如果文本值不起作用，请从按钮中删除禁用的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55951415/