선택 후 드롭 다운에 유효성 검사 비활성화를 추가하는 방법

Question

내 질문에 대한 투표를 받았습니다. 그러나 아무도 제안 된 해결책을 제공하지 않았습니다. 이것이 제가 다시 게시하는 이유입니다. 누군가에게서 제안을 얻기를 바래.

내 문제를 설명하는 동안 나와 함께 맨발로. 데이터가 포함 된 세 개의 드롭 다운이 있으며 사용자가 네 개의 드롭 다운을 선택하면이 세 개의 드롭 다운이 복제됩니다. 내 목표는 일단 사용자가 잘 작동하는 데이터를 선택하면 각 드롭 다운을 해제하는 것이 었습니다.

이제는 문제가 3 번 드롭 다운이 복제 된 후 사용자가 선택할 수없는 경우 이전 3 번의 드롭 다운이 활성화됩니다.

내 솔루션은 사용자가 이전 세 가지를 복제하는 네 번째 드롭 다운을 선택할 때마다, 나는 이전 세 가지가 사용자가 모든 데이터를 선택하기 위해 돌아갈 수 없기를 원할 것이고 동일한 절차가 될 것입니다. 3 번 드롭 다운 할 때마다 똑같이 복제됩니다.

나는 이것이 의미가 있기를 바랍니다. 사전에 감사

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와 클래스를주는 것입니다. 예를 들어 복제 할 때마다 요소에 클래스 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>