Cute Happy Ghost
본문 바로가기
Front/Javascript·Jquery

버튼클릭 시 disabled 설정,해제

by JENN_tech7 2021. 2. 10.
728x90
SMALL
<div class="form-group row">
	<label for="marketPrice" class="col-sm-2 col-form-label">판매가격</label>
	<div class="col-sm-8" style="display : inline-block;">
	<button class="btn btn-primary" type="button" style="margin-bottom : 10px;" id='btnFree' data-toggle="modal" data-target="#FreeModal">무료 나눔</button>
      <div style="display:flex;">
      <input type="text" class="form-control" id="marketPrice" onkeyup="numberWithCommas(this.value)" style="text-align : right;">
      <span class="input-group-text">원</span>
      </div>
	</div>
</div>

무료나눔을 눌렀을 때 감사하다는 창이 뜨고 가격은 입력되지 못하도록,

하지만 다시 무료나눔을 클릭했을 때는 가격창이 활성화되고 다른 모달창이 뜨도록

 

 

 

 

 

 

 

 $(function() {
    $("#btnFree").click(function() { 
		
		if($("#marketPrice").is(":disabled")){
			$('#FreeText').html("아쉽네요😢");
			$('#marketPrice').attr("disabled", false); 
		}
		else{
			
		$('#marketPrice').val("0");
		$('#marketPrice').attr("disabled", true); 
		$('#FreeText').html("무료나눔을 하는 당신, 멋져요👍");
	
		}
});
})		

제이쿼리를 사용해서 모달창의 html을 바꿔주고 input의 속성에 disabled를 false, true로 바꿀 수 있게하였다

($("#marketPrice").is(":disabled"))이 부분은 boolean값으로 나오기때문에 ifelse문을 쓰기 적절했다

 

 

 

 

 

 

728x90
LIST

'Front > Javascript·Jquery' 카테고리의 다른 글

javascript 버튼클릭 이벤트  (0) 2021.11.02
체크박스 이벤트  (0) 2021.07.08
Each  (0) 2020.12.13
manipulation  (0) 2020.12.13
traverse  (0) 2020.12.13

댓글