如何在选择下拉列表后将禁用验证添加到下拉列表

Question

我有三个包含数据的下拉菜单，这三个下拉菜单在用户 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);
}

};

Answer 1

您正在使用相同的 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>

如何在选择下拉列表后将禁用验证添加到下拉列表

How to add disable validation to a dropdown after it has been selected

javascript

jquery

html

drop-down-menu

cloning

HTML:

Jquery: