[ JavaScript ] input 타입 (text, checkbox, select, ... 등 ) value값을 얻고, 속성 추가하기

제가 구현하고 싶었던 내용은 

위의 사진처럼 체크박스가 여러개 존재하는데, 각 카테고리마다 내용이 중복이 되고있습니다. 

그래서, 만약에 "행"의 카테고리에서 "keyword"를 선택하면, 다른 두개의 "열"과 "값"에서는 "keyword"를 선택 못하도록 막고싶었습니다. 

 

JS에대한 지식이 부족해서 검색해보면서, 무식하게 구현한 것 같지만..

 

---

CheckBox 태그 

<input class="messageCheckbox" type="checkbox" value="keyword" onchange="changeDisabledOrEnabled(<?= $idx ?>, this.value, this.checked)">

onchange 속성을 사용해서, 해당 checkbox에 변화가 있을 때마다 changeDisabledOrEnabled()함수를 실행시킵니다.  

파라미터로는 해당, checkbox의 index번호, 해당 checkbox의 value값과 checked 여부를 보냅니다. 

 

(PHP로 코드하고 있기 때문에, idx를 계산해서 따로 보내줬습니다. 여기서 index번호를 보내주는 이유는 disable할 경우 해당 checkbox는 제외시켜주고 싶기때문입니다.  아마 JS를 잘이용하면 index값이 필요없을 것 같은데, 잘 모르겠어서 무식하게 코드했습니다.) 

---

JS 코드

<script>
    // 모든 체크박스의 인스턴스를 가져옮
    let checkBox = document.querySelectorAll('.messageCheckbox');

    function changeDisabledOrEnabled(idx, value, checked) {
        // checkbox를 클릭했을 때 (체크했을 때)
        if (checked === true) {
            for (let i = 0; i < checkBox.length; i ++){
                if (checkBox[i].value === value) {
                    checkBox[i].disabled = true
                }
            }
        // onchange를 실행한 checkbox는 선택가능한 상태로 냅두기 위해서
        checkBox[idx].disabled = false

        // checkbox를 해제했을 때 
        } else {
            for (let i = 0; i < checkBox.length; i ++){
                if (checkBox[i].value === value) {
                    checkBox[i].disabled = false
                }
            }
        }    
    }
</script>

 

모든 checkbox element가져오기

let checkBox = document.querySelectorAll('.messageCheckbox');

class가 messageCheckbox인 모든 checkbox를 가져옵니다. 

 

 

checkbox에 체크를 했을 때

if (checked === true) {
    for (let i = 0; i < checkBox.length; i ++){
        if (checkBox[i].value === value) {
            checkBox[i].disabled = true
        }
    }
// onchange를 실행한 checkbox는 선택가능한 상태로 냅두기 위해서
checkBox[idx].disabled = false

checked가 true일 경우, 모든 checkbox element에서 check된 checkbox의 value값과 동일한 checkbox를 가진 element를 disabled 속성을 true로 변경하는 것 

 

checkBox[idx].disabled = false

그리고, 해당 checkbox는 해제할 수 있도록 해야되기 때문에 disabled값을 false 로 변경합니다. 

 

checkbox에 체크를 해제 했을 때

else {
    for (let i = 0; i < checkBox.length; i ++){
        if (checkBox[i].value === value) {
            checkBox[i].disabled = false
        }
    }
}

체크했을 때와 반대로, 해당 value와 동일한 checkbox의 disabled의 속성 값을 false로 변경합니다.