[javascript] 특정 필드의 값에 따라 다른 필드들을 활성화/비활성화하는 방법은?
JavaScript를 사용하여 특정 필드의 값에 따라 다른 필드들을 활성화 또는 비활성화 할 수 있습니다. 일반적으로 이런 기능은 웹 폼에서 많이 사용되며, 사용자가 선택한 값을 기반으로 다른 필드들을 동적으로 조작하는 데 유용합니다. 아래는 이를 구현하는 간단한 예제 코드입니다.
// HTML 코드에서 필요한 요소들을 가져옵니다.
var mainField = document.getElementById('main-field');
var dependentField1 = document.getElementById('dependent-field1');
var dependentField2 = document.getElementById('dependent-field2');
// mainField의 값이 변경될 때마다 이벤트 리스너를 등록합니다.
mainField.addEventListener('change', function() {
var selectedValue = mainField.value;
// 선택한 값에 따라 다른 필드들을 조작합니다.
if (selectedValue === 'option1') {
dependentField1.disabled = false;
dependentField2.disabled = true;
} else if (selectedValue === 'option2') {
dependentField1.disabled = true;
dependentField2.disabled = false;
} else {
dependentField1.disabled = true;
dependentField2.disabled = true;
}
});
위의 예제 코드에서는 main-field, dependent-field1, dependent-field2와 같이 각 필드의 ID를 사용합니다. 이를 해당 HTML 요소의 실제 ID로 변경해야 합니다. 이 코드는 main-field의 값이 변경될 때마다, 선택한 값에 따라 dependent-field1 및 dependent-field2를 활성화 또는 비활성화합니다.
이 코드를 사용할 때 주의할 점은, 활성화/비활성화할 필드들이 반드시 disabled 속성을 가지고 있어야 한다는 점입니다. 이 속성을 사용하면 해당 필드를 사용자가 조작하지 못하도록 막을 수 있습니다.
이 코드를 참고하여 특정 필드의 값에 따라 다른 필드들을 활성화/비활성화하는 기능을 구현해 보세요.