' 在基于字段下拉值的表单上，我正在显示和隐藏复选框字段。当我隐藏复选框字段时，实时验证 disable() 方法不起作用。但是，它适用于文本字段。
<form method="post" name="TestForm" action="https://google.com/" onsubmit="return handleFormSubmit(this)" id="form94">
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement4" class="elq-field-style form-element-layout row">
<div style="text-align:left;" class="col-sm-12 col-xs-12"><label class="elq-label " for="fe1393">Experience<span class="elq-required">*</span></label></div>
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="field-control-wrapper">
<select class="elq-item-select" id="fe1393" name="country" style="width:100%;" data-value="">
<option value="">Please Select</option>
<option value="Professional">Professional</option>
<option value="Student">Student</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement6" class="elq-field-style form-element-layout row">
<div style="text-align:left;" class="col-sm-12 col-xs-12"><label class="elq-label " for="fe1728">Company Name</label></div>
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="field-control-wrapper"><input type="text" class="elq-item-input" name="singleLineText2" id="fe1728" value="" style="width:100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement8" class="elq-field-style form-element-layout row">
<div style="text-align:left;" class="col-sm-12 col-xs-12"><label class="elq-label " for="fe1729">skills</label></div>
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="field-control-wrapper" id="fe1729">
<div class="list-order one-column"><input type="checkbox" id="checkbox-Used Java for school projects_hvba7ekg" value="Used Java for school projects" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-Used Java for school projects_hvba7ekg">Used Java for school projects</label><br></div>
<div class="list-order one-column"><input type="checkbox" id="checkbox-0-1 years of professional experience_uwv0lzq" value="0-1 years of professional experience" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-0-1 years of professional experience_uwv0lzq">0-1 years of professional experience</label><br></div>
<div class="list-order one-column"><input type="checkbox" id="checkbox-1-3 years of professional experience_jp55zebf" value="1-3 years of professional experience" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-1-3 years of professional experience_jp55zebf">1-3 years of professional experience</label><br></div>
<div class="list-order one-column"><input type="checkbox" id="checkbox-4+ years of professional experience_uey2b9qdk" value="4+ years of professional experience" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-4+ years of professional experience_uey2b9qdk">4+ years of professional experience</label><br></div>
<div class="list-order one-column"><input type="checkbox" id="checkbox-No recent experience_txh6181p" value="No recent experience" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-No recent experience_txh6181p">No recent experience</label><br></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement10" class="elq-field-style form-element-layout row"><div class="col-sm-12 col-xs-12"><div class="row"><div class="col-xs-12"><div style="text-align:center;"><input type="Submit" class="submit-button-style " value="Submit" id="fe1398">
</div></div></div></div></div></div></div></div>
<\form>
<script type="text/javascript" src="https://img03.en25.com/i/livevalidation_standalone.compressed.js"></script>
<script > function handleFormSubmit(ele) {
var submitButton = ele.querySelector('input[type=submit]');
var spinner = document.createElement('span');
spinner.setAttribute('class', 'loader');
submitButton.setAttribute('disabled', true);
submitButton.style.cursor = 'wait';
submitButton.parentNode.appendChild(spinner);
return true;
}
function resetSubmitButton(e) {
var submitButtons = e.target.form.getElementsByClassName('submit-button');
for (var i = 0; i < submitButtons.length; i++) {
submitButtons[i].disabled = false;
}
}
function addChangeHandler(elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('change', resetSubmitButton);
}
}
var form = document.getElementById('form94');
addChangeHandler(form.getElementsByTagName('input'));
addChangeHandler(form.getElementsByTagName('select'));
addChangeHandler(form.getElementsByTagName('textarea'));
var nodes = document.querySelectorAll('#form94 input[data-subscription]');
if (nodes) {
for (var i = 0, len = nodes.length; i < len; i++) {
var status = nodes[i].dataset ? nodes[i].dataset.subscription : nodes[i].getAttribute('data-subscription');
if (status === 'true') {
nodes[i].checked = true;
}
}
};
var nodes = document.querySelectorAll('#form94 select[data-value]');
if (nodes) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var selectedValue = node.dataset ? node.dataset.value : node.getAttribute('data-value');
if (selectedValue) {
for (var j = 0; j < node.options.length; j++) {
if (node.options[j].value === selectedValue) {
node.options[j].selected = 'selected';
break;
}
}
}
}
}
this.getParentElement = function(list) {
return list[list.length - 1].parentElement
};
</script>
基于字段（经验）下拉选择的验证
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#formElement6").css('display','none')
$("#formElement8").css('display','none')
$("#fe1393").on("change", function () {
if (this.value === 'Student')
{
$("#formElement6").css('display','block')
$("#formElement8").css('display','none')
student();
professional(true)
}
else if (this.value === 'Professional'){
$("#formElement6").css('display','none')
$("#formElement8").css('display','block')
professional();
student(true);
}
});
});
<script>
function student(showValidate) {
var dom6 = document.querySelector('#form94 #fe1728');
var fe1728 = new LiveValidation(dom6, { validMessage: "", onlyOnBlur: true, wait: 300 });
if (!showValidate) {
fe1728.enable();
fe1728.add(Validate.Presence, {
failureMessage: "This field is required"
});
}
else {
fe1728.disable();
}
}
function professional(showValidate){
var dom8 = document.querySelectorAll('#form94 [name="checkboxes"]');
var fe1729 = new LiveValidation(dom8, {validMessage: "", onlyOnBlur: true, wait: 300, insertAfterWhatNode :this.getParentElement(dom8), isGroup: true}, true);
if(!showValidate){
fe1729.add(Validate.Custom, {against: function(value) {return !value.match(/(telnet|ftp|https?):\/\/(?:[a-z0-9][a-z0-9-]{0,61}[a-z0-9]\.|[a-z0-9]\.)+[a-z]{2,63}/i);}, failureMessage: "Value must not contain any URL's"});
fe1729.add(Validate.Custom, {against: function(value) {return !value.match(/(<([^>]+)>)/ig);}, failureMessage: "Value must not contain any HTML"});
fe1729.add(Validate.Presence, {
failureMessage: "This field is required"
});
}
else {
fe1729.disable();
}
}
</script>
CSS
<style>
.LV_invalid_field,input.LV_invalid_field:active,input.LV_invalid_field:hover,textarea.LV_invalid_field:active,textarea.LV_invalid_field:hover
{outline:1px solid #c00}
.LV_validation_message{font-weight:700;margin:0 0 0 5px}
.LV_valid{display:none}
.LV_invalid{color:#c00;font-size:10px}.
</style>
' 其中 dom6 是文本字段，dom8 是复选框字段。文本字段禁用（）工作正常，复选框禁用不工作'
当我第一次从下拉列表中选择学生选项并提交表单时，它正在工作。（这意味着背景上的复选框字段未验证）
当我首先从下拉列表中选择专业选项然后不提交表单时，我从下拉列表中选择学生选项并尝试提交表单 - 在这种情况下表单未提交，这意味着复选框字段（dom8）是仍在后台验证。
' 提前致谢'