如何在选择下拉列表后将禁用验证添加到下拉列表
How to add disable validation to a dropdown after it has been selected
我有三个包含数据的下拉菜单,这三个下拉菜单在用户 select 四个下拉菜单之后被克隆。我的目标是在用户 select 编辑了正常工作的数据后禁用每个下拉菜单。
现在的问题是在第二次克隆三个下拉菜单后,前三个下拉菜单在用户仍然无法访问时启用它们自己select。
我的解决方案是每次用户 select 克隆前三个的第四个下拉菜单时,我希望前三个不能让用户返回 select每次克隆三个下拉列表时,任何数据和相同的程序都是相同的。
我希望这是有道理的。提前致谢
HTML:
<option value="AND Quantity <= ">Less Than Or Equal To</option>
<option value="AND Quantity >= ">Greater Than Or Equal To</option>
</select>
<input id="js-ilterValue" type="number" min="0" placeholder="Characteristic Value" style="height: 39px; width: 166px;" />
<button id="js-AddValueFilter" class="mini-button" type="button" onclick="AddValue(document.getElementById('js-ilterValue').value)">+</button>
</div>
<div id="ANDORLabel" class="editor-label" style="width: 157px;"></div>
<div id="ANDORContainer" style="margin-bottom: 10px;">
<select id="ddlANDOR" onchange="ddlANDORChange(this)">>
<option value="">---Add On Statement---</option>
<option value="AND">Both Statements are True</option>
<option value="OR">Either Statement is True</option>
</select>
</div>
Jquery:
function ddlANDORChange(obj) {
var currentLambdaExpression = $('#js-LambdaString').val();
var newLambdaExpression = null;
var currentUIExpression = $('#js-FilterString').val();
var newUIExpression = null;
var currentAndOrString = $('#binaryStringAndOr').val();
if (currentLambdaExpression.endsWith(")")) {
newLambdaExpression = currentLambdaExpression + " " + obj.value + " ";
newUIExpression = currentUIExpression + " " + obj.options[obj.selectedIndex].text + " ";
if (obj.value == 'AND')
{
$('#binaryStringAndOr').val(currentAndOrString + '1');
}
else if (obj.value == 'OR')
{
$('#binaryStringAndOr').val(currentAndOrString + '0');
}
$('#js-LambdaString').val(newLambdaExpression);
$('#js-FilterString').val(newUIExpression);
// Copies the dropdowns above, need to find a away to add the onchange code without repeating it
$('#container:last').before($('#ddlProfile').clone().prop('id', 'ddlProfileClone').prop('disabled', false).show());
$('#container:last').before($('#ddlOption').clone().prop('id', 'ddlOptionClone').prop('disabled', false).show());
$('#container:last').before($('#js-FilterValue').clone().prop('id', 'js-FilterValue').prop('disabled', false).show());
$('#container:last').before($('#js-AddValueFilter').clone().prop('id', 'js-AddValueFilterClone').prop('disabled', false).show());
$('#container:last').before($('#ANDORLabel').clone().prop('id', 'ANDORLabelClone').show());
$('#container:last').before($('#ANDORContainer').clone().prop('id', 'ANDORContainerClone').show());
if ($('ddlProfileClone').show()) {
document.getElementById("ddlProfileClone").disabled = false;
alert("it is new ");
if ($('#ddlProfileClone').prop('disabled', false).on('change ' , function () {
document.getElementById("ddlProfileClone").disabled = true;
alert("it will return to it is new ");
})
);
else if ($('#ddlProfileClone').prop('disabled', false).on('change ' == false, function () {
document.getElementById("ddlProfileClone").disabled = false;
alert("it");
})
);
}
counter++;
$('#AndOrCounter').val(counter);
}
};
您正在使用相同的 ID,因此当您第二次克隆时,您最终会得到 ddlProfileClone
并且其他人也一样。
你应该做的是在每次克隆时给他们一个 ID 和一个 class.For 示例,你给元素 CLASS ddlProfileClone
和一个像 'ddlProfileClone' + i
这样的 ID .
'i' 将是一个整数,每次克隆时都会递增,您将在函数外部声明,这样 id 就不会每次都被重置或随机生成的数字。
编辑
这是我能想出的最简单的实现,甚至没有 ID 或任何东西。
试用代码片段并以此为基础进行构建
$('#ANDORContainer').on('change', '.ddlANDOR', function() {
$(this)
.prop('disabled', true)
.clone()
.prop('disabled', false)
.appendTo('#ANDORContainer');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ANDORContainer" style="margin-bottom: 10px;">
<select class="ddlANDOR" data-count="0">
<option value="">---Add On Statement---</option>
<option value="AND">Both Statements are True</option>
<option value="OR">Either Statement is True</option>
</select>
</div>
我有三个包含数据的下拉菜单,这三个下拉菜单在用户 select 四个下拉菜单之后被克隆。我的目标是在用户 select 编辑了正常工作的数据后禁用每个下拉菜单。
现在的问题是在第二次克隆三个下拉菜单后,前三个下拉菜单在用户仍然无法访问时启用它们自己select。
我的解决方案是每次用户 select 克隆前三个的第四个下拉菜单时,我希望前三个不能让用户返回 select每次克隆三个下拉列表时,任何数据和相同的程序都是相同的。
我希望这是有道理的。提前致谢
HTML:
<option value="AND Quantity <= ">Less Than Or Equal To</option>
<option value="AND Quantity >= ">Greater Than Or Equal To</option>
</select>
<input id="js-ilterValue" type="number" min="0" placeholder="Characteristic Value" style="height: 39px; width: 166px;" />
<button id="js-AddValueFilter" class="mini-button" type="button" onclick="AddValue(document.getElementById('js-ilterValue').value)">+</button>
</div>
<div id="ANDORLabel" class="editor-label" style="width: 157px;"></div>
<div id="ANDORContainer" style="margin-bottom: 10px;">
<select id="ddlANDOR" onchange="ddlANDORChange(this)">>
<option value="">---Add On Statement---</option>
<option value="AND">Both Statements are True</option>
<option value="OR">Either Statement is True</option>
</select>
</div>
Jquery:
function ddlANDORChange(obj) {
var currentLambdaExpression = $('#js-LambdaString').val();
var newLambdaExpression = null;
var currentUIExpression = $('#js-FilterString').val();
var newUIExpression = null;
var currentAndOrString = $('#binaryStringAndOr').val();
if (currentLambdaExpression.endsWith(")")) {
newLambdaExpression = currentLambdaExpression + " " + obj.value + " ";
newUIExpression = currentUIExpression + " " + obj.options[obj.selectedIndex].text + " ";
if (obj.value == 'AND')
{
$('#binaryStringAndOr').val(currentAndOrString + '1');
}
else if (obj.value == 'OR')
{
$('#binaryStringAndOr').val(currentAndOrString + '0');
}
$('#js-LambdaString').val(newLambdaExpression);
$('#js-FilterString').val(newUIExpression);
// Copies the dropdowns above, need to find a away to add the onchange code without repeating it
$('#container:last').before($('#ddlProfile').clone().prop('id', 'ddlProfileClone').prop('disabled', false).show());
$('#container:last').before($('#ddlOption').clone().prop('id', 'ddlOptionClone').prop('disabled', false).show());
$('#container:last').before($('#js-FilterValue').clone().prop('id', 'js-FilterValue').prop('disabled', false).show());
$('#container:last').before($('#js-AddValueFilter').clone().prop('id', 'js-AddValueFilterClone').prop('disabled', false).show());
$('#container:last').before($('#ANDORLabel').clone().prop('id', 'ANDORLabelClone').show());
$('#container:last').before($('#ANDORContainer').clone().prop('id', 'ANDORContainerClone').show());
if ($('ddlProfileClone').show()) {
document.getElementById("ddlProfileClone").disabled = false;
alert("it is new ");
if ($('#ddlProfileClone').prop('disabled', false).on('change ' , function () {
document.getElementById("ddlProfileClone").disabled = true;
alert("it will return to it is new ");
})
);
else if ($('#ddlProfileClone').prop('disabled', false).on('change ' == false, function () {
document.getElementById("ddlProfileClone").disabled = false;
alert("it");
})
);
}
counter++;
$('#AndOrCounter').val(counter);
}
};
您正在使用相同的 ID,因此当您第二次克隆时,您最终会得到 ddlProfileClone
并且其他人也一样。
你应该做的是在每次克隆时给他们一个 ID 和一个 class.For 示例,你给元素 CLASS ddlProfileClone
和一个像 'ddlProfileClone' + i
这样的 ID .
'i' 将是一个整数,每次克隆时都会递增,您将在函数外部声明,这样 id 就不会每次都被重置或随机生成的数字。
编辑
这是我能想出的最简单的实现,甚至没有 ID 或任何东西。
试用代码片段并以此为基础进行构建
$('#ANDORContainer').on('change', '.ddlANDOR', function() {
$(this)
.prop('disabled', true)
.clone()
.prop('disabled', false)
.appendTo('#ANDORContainer');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ANDORContainer" style="margin-bottom: 10px;">
<select class="ddlANDOR" data-count="0">
<option value="">---Add On Statement---</option>
<option value="AND">Both Statements are True</option>
<option value="OR">Either Statement is True</option>
</select>
</div>