如何解决Javascript LiveValidation disable在复选框上不起作用
'在基于字段下拉值的表单上，我正在显示和隐藏复选框字段。隐藏复选框字段时，实时验证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: "",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是复选框字段。文本字段disable（）工作正常，复选框disable不起作用'
当我第一次从下拉列表中选择“学生”选项并提交表格时，它就可以使用了。 （这意味着背景中的复选框字段未通过验证）
当我首先从下拉列表中选择专业选项，然后不提交表单时，我从下拉列表中选择了学生选项，然后尝试提交表单-在这种情况下，表单未提交，这意味着复选框字段（ dom8）仍在后台进行验证。
“在此先感谢”
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
