css/javascript 요소가 true를 반환해야하는 경우 false를 반환합니다.

Question

하나의 필드 형식 (텍스트 입력 및 제출 버튼)이 있습니다. 양식 코드는 다음과 같습니다.

JavaScript를 사용하면 텍스트 입력란에 텍스트가 입력되면 제출 버튼을 클릭 할 수 없어야합니다. 필드에 텍스트가 없으면 클릭 할 수 있어야합니다. 나는 자바 스크립트를 사용하여 버튼 추가 또는 비활성화 클래스를 제거하거나 다시 넣는 중입니다. 여기에 자바 스크립트입니다 :

(function($){ 
    $(document).on('focusin', '#resume-field', function() { 
     $(this).parents().find('.button-add-disabled').removeClass('button-add-disabled'); 
    }).on('focusout', '#resume-field', function(){ 
     if(this.value==' '||this.title==this.value) { 
      $(this).parents().find('.button-add').addClass('button-add-disabled'); 
     } else { 
      $(this).parents().find('.button-add').removeClass('button-add-disabled'); 
     } 

    });  

    $('.button-add-disabled').click(function(){ 
     return false; 
    }); 
}(jQuery)); 

그리고 여기에 CSS입니다 : 기대와 자바 스크립트가 작동으로

.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block; 
    font-size: 11px; line-height: 28px ; color: #fff; text-align: center; 
    font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto; 
    border-radius: 3px; } 
.button-add:hover { text-decoration: none; 
    -webkit-transition:none; 
     -moz-transition:none; 
     -ms-transition:none; 
     -o-transition:none; 
      transition:none; 
} 
.td80 .button-add { margin-left:35px !important; } 
.button-add-disabled { background: url(/assets/add-specialities-disabled.png) 
    repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px; } 
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png) 
    repeat-x 0 0; box-shadow: 0 0 0 0; } 

클래스가 변화하고있다. 그러나 어떤 이유로 인해 .button-add-disabled가 form 요소에 적용되지 않더라도 form 요소는 여전히 false를 반환하므로 제출하지 않습니다. javascript에 의해 "button-add-disabled"가 제거되면 양식을 제출해야합니다. 서버 로그를 볼 수 있습니다. 내가 자바 스크립트에서 라인을 제거하면 "반환 : false", 양식 작동, 그래서 양식 자체가 작동 알아요. 나는 자바 스크립트에 뭔가 잘못되었다고 확신한다. 어떤 아이디어?

Answer 1

그건 어떻게 작동하지 않습니다. 이벤트는 선택기를 통해 도달하는 요소에 바인딩됩니다. 그들은 선택자에 묶여 있지 않습니다.

이벤트를 요소에 직접 바인딩하면 이벤트를 명시 적으로 바인딩 해제 할 때까지 이벤트가 해당 요소에 바인딩됩니다. 원래의 선택자는 더 이상 적합하지 않습니다.

당신은 그것 같이이, 또는 뭔가를 수행해야합니다

입니다

$('.button-add-disabled').click(function(){ 
    return !$(this).hasClass('button-add-disabled'); 
}); 

, 테스트 버튼이 현재 이벤트가 발생 지점에서 수업으로 비활성화 여부. 여담으로

이 ...

if(this.value==' '||this.title==this.value) { 
    $(this).parents().find('.button-add').addClass('button-add-disabled'); 
} else { 
    $(this).parents().find('.button-add').removeClass('button-add-disabled'); 
} 

이 있어야한다 :

당신은 입력 요소의 disabled attribute를 제거/설정하려는

var disabled = this.value == ' ' || this.title == this.value; 
$(this).parents().find('.button-add').toggleClass('button-add-disabled', disabled); 

Answer 2

, 인 CSS 스타일을 설정하지 단지

$('#resume-field').on('change', function() { 
    if ($(this).val().length == 0) { 
     $(this.form).find('input[type=submit]').attr('disabled', false).removeClass('button-add-disabled'); 
    } else { 
     $(this.form).find('input[type=submit]').attr('disabled', true).addClass('button-add-disabled'); 
    } 
}) 

jsFiddle Demo

표시 목적

사용자가 입력 필드에 enter 키를 눌렀을 때 양식 제출을 처리했는지 확인하려면 jQuery .submit 이벤트 처리기를 사용하고 기본 동작을 방지하면됩니다. 이 서버 측을 처리하는 것도 중요합니다.

편집 : 방금 CSS가 무엇을하고 있었는지, 업데이트 된 답변을 발견했습니다.