How To Add Disable Validation To A Dropdown After It Has Been Selected

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

Solution 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');
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="ANDORContainer"style="margin-bottom: 10px;"><selectclass="ddlANDOR"data-count="0"><optionvalue="">---Add On Statement---</option><optionvalue="AND">Both Statements are True</option><optionvalue="OR">Either Statement is True</option></select></div>