[Jquery]특정값에 대한 SelectBox 선택불가 기능 구현

안녕하세요. 오늘은 특정 값이 0일경우 select박스를 선택할 수 없도록 해보려합니다.

우선 위의 기능을 구현하기 위해 제이쿼리에서 필요한 문법을 정리해보았습니다.

 

---

disabled : input태그가 비활성화됩니다.

.pop() : 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나, 속성을 추가합니다.(javascript속성)

.not() : 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다.

=* : 속성 값에 문자열이 포함 되어 있는 경우를 찾습니다.

 

 

 

---

아래 그림을 보면 툭정값이 0이 일때 jquery에서 disabled를 사용하여 선택이 안되도록 만들었습니다.

 

 

테스트 1의 값 = 1

테스트 2의 값 = 1

 

테스트 3의 값 = 0

 

 

HTML

 

각각의 select박스에 id를 부여하고 값을 넣어줍니다.

<tr>
<th scope="col" class="t_c"><span class="em_red2">*</span>테스트1</th>
<td class="t_l"><select name="OpValue1" id="OpValue1">
    <option value="미사용">미사용</option>
    <option value="사용">사용</option>
</select></td>
<th scope="col" class="t_c"><span class="em_red2">*</span>테스트2</th> 
<td class="t_l"><select name="OpValue2" id="OpValue2">
    <option value="미사용">미사용</option>
    <option value="1시간">1시간</option>
    <option value="2시간">2시간</option>
</c:forEach>
</select></td>
<th scope="col" class="t_c"><span class="em_red2">*</span>테스트3</th>
<td class="t_l"><select name="OpValue3" id="OpValue3">
    <option value="미사용">미사용</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select></td>
</tr>

 

 

 

JQUERY

 

optionChk라는 함수를 만들어줍니다.

여기서 helloVO에 optionValue값을 각각의 opValue의 변수에 넣어줍니다.

(저는 특정값을 helloVO.optionValue1과 2는 1,   / 3은 0으로 설정하였습니다.)

그리고 .not과 *=을 사용해서 옵션값이 0이 아닌것에 대해서 

.prop을 이용해서 disabled(선택불가)를 선택하는겂니다.

그리고 function에 optionChk함수가 실행되도록 넣어주면 됩니다.

<script>
 
$(function(){
 
    optionChk();
 
    
});
 
 
function optionChk(){
    
    var OpValue1 = "${helloVO.optionValue1}";
    var OpValue2 ="${helloVO.optionValue2}";
    var OpValue3 ="${helloVO.optionValue3}";
 
    if(OpValue1=="0"){
        $("#OpValue1").not("option[value*='0']").prop('disabled',true);
    }
    
    if(OpValue2=="0"){
        $("#REV_MCRPHN_COUNT").not("option[value*='0']").prop('disabled',true);
    }
    
    if(OpValue3=="0"){
        $("#REV_BOARD_USE").not("option[value*='0']").prop('disabled',true);
    }
    
}
 
</script>