input checkbox비활성화

loadin1.gif

0.10MB

간혹 check박스를 눌렀을 경우 데이터를 조회하여 페이지에 띄워 주는 경우,

성격 급한 대한민국 종특들은 체크박스를 연타 해버리는 경우에 데이터가 여러개 페이지에 띄워지는 경우가 있다.

이러한 상황을 방지하고자 구현한 내용이다.

 

function aaaaa(value, text, report_name){
    var arrStr = value.split('|');
    var filter = "{'r_id': '"+arrStr[0]+"', 'user_id': '"+arrStr[1]+"' }"
    $.ajax({
		url: api+'CombineDetail',
		headers: {
			'Authorization': memberToken,
			'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
			'Accept': '*/*',  },
		type: 'GET',
		data: { 'filter': filter },
		dataType: "JSON",
		success: function (result) {
			setAxis(value, result.header, text, result.data, report_name)
		}, beforeSend: function(){
			$("input").prop("disabled", true);
		}, complete : function(){
            		$("input").prop("disabled", false);
		},
		error: function (err) {
			console.log(err);
			
		}
      })
}

위 함수는 ajax를 이용하여 api를 호출 데이터를 받아오고 성공적으로 호출이 되었을 경우 setAxis라는 함수를 사용해서 데원하는 모양을 페이지에 그려주는 코드이다.

 

이때 확인 해야 할 내용은 beforeSend , complete 인데 

 

beforeSend는 ajax 호출이 success되어 function안의 내용이 동작이 되고 있는 도중에 작업되는 내용이고, 

complete는 말 그대로 success되어 function안의 내용의 동작이 끝났을 때에 실행되는 내용이다.

 

손이 빠른 한국인들을 위해 다른 check박스를 건들지 못하도록 input태그 전체를 disable처리 하여 비활성화 시켜주는 코드를 만들어 보았다.

 

응용버전으로 로딩화면 띄우는 코드도 아래에 기재합니다.

조각조각 나누어진 내용은 알아서 잘 붙여주세요

}, beforeSend: function(){
	$('.wrap-loading').removeClass('display-none');
}, complete : function(){
	$('.wrap-loading').addClass('display-none');
    
    
    
    
    
    
    
//========================================================
//HTML내용

.wrap-loading { /*로딩 이미지*/
            position: fixed;
            top:35%;
            left:70%;
            margin-left: -21px;
            margin-top: -21px;
        }
        
        
    <div class="wrap-loading display-none">
          <div><img style="width: 50px; height: 50px;" src="../com/img/loading1.gif" /></div>
    </div>

 

로딩파일은 위에 있습니다 가져다 쓰세요