데이터 없을때 클릭안되게하기

이한나 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.04.27 11:17:51 1847 (222.♡.♡.48)

답변 2

본문

안녕하세요!

셀렉트박스를 선택 한후 a버튼을 클릭하면 모달창 이벤트가 발생되는 작업을 하고있는데

선택안함을 클릭했을때는 클릭할수 없게 하고싶습니다!

어떤스크립트를 추가하면 될까요 ?도움 부탁드립니다 ㅠ


 

<select id="selectCharge" class="form-select form-select-lg d-inline-block fs-5" style="font-size: 16px!important; width: 300px; height: 64px; margin-right: 15px; ">
    <option value="　" selected>::선택 안함::</option>
    <option value="옵션1">옵션1</option>
    <option value="옵션2">옵션2</option>
</select>
<a class="btn btn-dark text-white toggle-text w-100 d-flex justify-content-between mb-2 mt-2  reportpage-btn"  data-bs-toggle="modal" data-bs-target="#exampleModal1" data-show="reportpage-5" style="padding: 5px 24px; height: 65px;">


<div class="collapse" id="collapseExample8">
    <div id="Charge_0" style="display: none; ">
    </div>
    <div id="Charge_1" style="display: none; ">
       1
    </div>
    <div id="Charge_2" style="display: none;">
       2
    </div>

</div>
 
 
<script>

$(document).on("change", "#selectCharge", function(){

    var selectedval = $(this).val();

    if(selectedval == "　"){
        $("#Charge_0, #Charge_modal_0").css("display","block");
        $("#Charge_1, #Charge_modal_1, #Charge_2, #Charge_modal_2").css("display","none");
    }else if(selectedval == "옵션1"){
        $("#Charge_1, #Charge_modal_1").css("display","block");
        $("#Charge_2, #Charge_modal_2, #Charge_0, #Charge_modal_0").css("display","none");
    }else if(selectedval == "옵션2"){
        $("#Charge_2, #Charge_modal_2").css("display","block");
        $("#Charge_1, #Charge_modal_1, #Charge_0, #Charge_modal_0").css("display","none");
    }
    $("#selectResultCharge").html(selectedval);


});

</script>