쿠폰이 없는 경우 비활성화 처리하기

<select class="p100 selectbox" onchange="doublechangeFunc(${idx.index});"
id="doubleselectBox${idx.index}">
<option value="none">더블 쿠폰을 선택해주세요</option>

=> select 박스의 class 요소를 selectbox라고 명시한다.

=> 하위 요소로 option 박스가 있다.

 

/* 쿠폰이 없는 경우, 비활성화 처리 및 '적용 가능한 쿠폰이 없습니다' */
$(document).ready(function () {

$(".selectbox").each(function (e) {

var selectBoxOption = $(this).children('option');
var selectBoxLength = selectBoxOption.length;

if(selectBoxLength == 1) {

$(this).prop('disabled',true);
$(selectBoxOption).text('적용 가능한 쿠폰이 없습니다.');
}
})
});

=> dom을 생성하고 .selectbox로 클래스의 요소에 접근한다.

=> selectbox의 하위요소인 option 박스에 this.children을 사용하여 접근하여 변수로 선언.

=> 선언한 option 박스의 길이를 선언.

=> 쿠폰이 있는 경우: selectbox에 최초에 '쿠폰을 선택해주세요' 문구가 있으므로 option 박스의 길이는 2개 이상이 된다.

=> 쿠폰이 없는 경우: selectbox에 최초 '쿠폰을 선택해주세요' 문구만 있으므로 option 박스 길이는 1개이다.

=> 따라서 옵션 박스의 길이가 1인 경우, 옵션 박스의 요소를 disabled 처리한 뒤 '적용 가능한 쿠폰이 없습니다' 문구가 뜨도록 한다.