버튼 비활성화 시키기

button disabled

프로젝트 진행중 마일스톤에서 새로운 마일스톤을 등록시켜야하는데 필수 데이터값을 입력해야 하는 input 이 2곳 있었다.
첫번째는 milestone_title
두번째는 milestone_cont

두개를 입력하기 전까진 create milestone 버튼을 비활성화 시켜둬야 했다.

내가 한 방법(쉐인이 도와줌)은 버튼을 미리 disabled 시키고 두개의 값이 입력 되었을때 활성화 시켜주는것.

1. milestone_title 과 milestone_cont 에 동일한 class 를 준다.
   난 class="milest-input" 로 통일했다.

2. 버튼에 disabled 를 미리 넣어둔다.

   <button
   class="create-btn btn btn-primary m-b-30 m-t-15 f-s-14 p-l-20 p-r-20 m-r-10" type="button" disabled >
   <i class="fa fa-check m-r-5"></i> create milestone
   </button>

버튼에 disabled 를 넣어두면 새로운 마일스톤 입력 창이 뜨면 누를수 없는 상태가 유지된다.
disabled = true 가 실행되는 중이다.

3. $('#newmilestone-form').find('#milest_title')
   insert form 의 id 인 '#newmilestone-form' 에서 '#milest_title' 를 찾고 이걸 milestTitleArea에 넣어준다.
   milest_cont 도 동일하게 처리한다.
4. milestTitleArea = $('#newmilestone-form').find('#milest_title') milestContArea = $('#newmilestone-form').find('#milest_cont')
5. $('.milest-input').on('input',function()
   공통으로 지정해둔 아이디에서 input 이 발생하면 각 값을 컬럼명과 동일한 이름으로 넣어준다.
6. $('.milest-input').on('change',function() 보다 $('.milest-input').on('input',function() 이 반응 속도 가 빠르다.

$('.milest-input').on('input',function(){

            milest_title = milestTitleArea.val();
            milest_cont = milestContArea.val();

5. if(milest_title.length * milest_cont.length != 0)
6. if 문을 이용해서 두개의 길이의 값이 0이면 disabled 을 유지하고 아닐경우 disabled = false 로 변경해준다.

if(milest_title.length * milest_cont.length != 0){
                $('.create-btn').prop('disabled',false);
            }else {
                $('.create-btn').prop('disabled',true);

            }

이렇게 처리하면 button disabled 처리 완료

아래는 활용한 코드이다.

milestTitleArea = $('#newmilestone-form').find('#milest_title')
        milestContArea = $('#newmilestone-form').find('#milest_cont')

        $('.milest-input').on('input',function(){

            milest_title = milestTitleArea.val();
            milest_cont = milestContArea.val();


            if(milest_title.length * milest_cont.length != 0){
                $('.create-btn').prop('disabled',false);
            }else {
                $('.create-btn').prop('disabled',true);

            }

끝
다음은 form 에 submit 버튼 hidden 시켜두기