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

Question

I have three drop downs containing data, these three drop downs get cloned after the user select the four drop down. my aim was to disable each drop down once the user has selected the data which works fine.

Now the problem is after the three drop down gets cloned for the second time the previous three drop downs enable themselves when they should still unable for the user to select.

my solution to be is every time the user select the fourth drop down which clone the previous three, i would want the previous three to stay unable for the user to go back to select any data and the the same procedures will be the same every time to three drop down get cloned.

i hope this made sense. thanks in advance

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

You are using the same id so when you clone for the second time you end up with to ddlProfileClone and same for others.

What you should do is giving them an id and a class.For example each time you clone you give the element the CLASS ddlProfileClone and an ID like 'ddlProfileClone' + i.

'i' would be an integer that you increment every time you clone that you would declare outside of the function so that id doesn't get reset every time or a random generated number.

EDIT

Here is the simplest implementation i could come up with without even ids or anything.

Play around with the snippet and build on it

$('#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>