[JS] 옵션 선택 시 input 활성 비활성 제어

설명 :

복리후생비, 여비교통비, 기타 선택 시 '주행거리' input 비활성화하고 '신청금액'만 활성화,

차량유지비 선택 시 '신청금액'  input 비활성화하고  '주행거리' input 활성화.

 

복리후생비 등은 '주행거리' 비활성화

차량유지비는 '신청금액' 비활성화

 

<tr>
    <td onchange="optionControl()" style="text-align:center;">
        <select id="carKind" name="flag">
            <option value="" >:: 선택 ::</option>
            <option value="복리후생비">복리후생비</option>
            <option value="차량유지비">차량유지비</option>
            <option value="여비교통비">여비교통비</option>
            <option value="기타">기타</option>
        </select>
    </td>
    <td> <!-- 신청금액 -->
        <input id="Application_amount" name="amount" type="text" value="" placeholder="0">
    </td>
    <td> <!-- 주행거리 -->
        <input id="distance_driven" name="mileage" type="text" value="" placeholder="0">
    </td>
</tr>

 

//구분옵션제어
function optionControl() {
	var selectedOption = document.getElementById('carKind').value;
	var distanceInput = document.getElementById('distance_driven');
	var AppamountInput = document.getElementById('Application_amount');
	
	distanceInput.disabled = false;
	AppamountInput.disabled = false;
	    
    //선택된 옵션에 따라 입력란을 비활성화
    //아무것도 선택되지 않았을 경우에는 모든 입력란을 활성화 상태로 유지
    switch(selectedOption) {
    case '복리후생비':
    case '여비교통비':
    case '기타':
        distanceInput.disabled = true;
        break;
    case '차량유지비':
        AppamountInput.disabled = true;
        break;
    }
	
}