JS를 사용하여 양식 필드를 읽기 전용으로 표시

Question

사용자 선택 수준에 따라 지불금을 수금하는 양식이 있습니다. 그들이 레벨을 선택하면 자동으로 JS 금액이 양식에 채워집니다. 내가 뭘하고 싶은지는 옵션을 선택한 후 필드를 readonly으로 표시하는 것입니다. 그러나 잡기가있다. 맞춤 금액을 입력 할 수있는 옵션이 있습니다 (최소 금액 설정). 이 옵션을 선택한 경우 사용자가 금액을 입력 할 수 있도록 금액 입력란을 남기고 싶습니다.

필드를 자동 입력하고 readonly으로 표시하려면 사용자 지정 금액을 선택하지 않은 경우 어떻게해야합니까? 여기

내 HTML과 JS입니다 (참고 :. 나는뿐만 아니라 전체 양식 관련된 두 필드의 HTML을 표시하고있다)

HTML

<!-- MEMBERSHIP SELECT --> 
<div><label for="CAT_Custom_320540">Membership Level <span class="req">*</span></label></div> 
    <select class="cat_dropdown" id="CAT_Custom_320540" name="CAT_Custom_320540"> 
    <option value=" ">-- Please select --</option> 
    <option value="20.00">Basic $20</option> 
    <option value="35.00">Regular $35</option> 
    <option value="50.00">Advocate $50</option> 
    <option value="100.00">Dedicated $100</option> 
    <option value="250.00">Big Time $250</option> 
    <option value="3500.00">Lifetime $3500</option> 
    <option value="">Custom Amount</option> 
    </select> 

<!-- AMOUNT --> 
<div><label for="Amount">Amount<span class="req">*</span> <span id="constraint-300-label"> (minimum: <span id="constraint-300">20.00</span>)</span></label></div> 
<input name="Amount" type="text" class="cat_textbox" id="Amount" /> 

JS

var select = document.getElementById('CAT_Custom_320540'); 
var input = document.getElementById('Amount'); 
    select.onchange = function() { 
     input.value = select.value; 
} 

볼 수 있듯이 금액 필드에 자동 채우기가 있지만 읽기 전용으로 표시하는 방법을 모르면 및 필드를 떠날 수 있습니다. 사용자 지정 금액을 선택한 경우 읽기 전용입니다.

저는 사이트에서 jQuery 1.8.3을 사용하고 있으며 jQuery를 사용하기 위해 기꺼이 바닐라 JS로 수행 한 작업을 수행했습니다.

Answer 1

나는 값이 비어 있지 않은 경우이 값을 테스트하고 disabled 속성을 사용할 수 있습니다 생각 :

var select = document.getElementById('CAT_Custom_320540'); 
var input = document.getElementById('Amount'); 
    select.onchange = function() { 
     input.value = select.value; 
     if ($.trim(input.value).length) 
     input.setAttribute('disabled',true); 
     else 
     input.removeAttribute('disabled'); 
} 

JSFiddle