How can I validate cloned drop downs wherein a drop down will be selected, the option will be disabled to other drop down lists?
Html Code
<form id="surveyForm" method="post" class="form-horizontal">
<div class="form-group" id="surveyTemplate">
<label class="col-xs-3 control-label">Options</label>
<div class="col-xs-5">
<select class="form-control user" name="employee[]">
<option></option>
<option value="1">Martin Luther</option>
<option value="2">Mark Glovo</option>
<option value="3">Michael Sei</option>
</select>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Jquery Code
$('#surveyForm').on('click', '.addButton', function() {
var template = $('#surveyTemplate'),
clone = template
.clone()
.removeAttr('id')
.insertBefore($template),
$employee = clone.find('[name="employee[]"]');
$('#surveyForm').formValidation('addField', employee);
});
$("#surveyForm").on('change', '.user', function() {
var value = $(this).val();
$(this).find("option[value =" + value + "]").attr('disabled', false);
$("select").not(this).find("option[value =" + value + "]").attr('disabled', true);
});
Note that when I click the add button, it adds a clone of this form.