2009-08-27 5 views
7

하나 이상의 입력 필드가 비어 있으면 보내기 버튼을 어떻게 비활성화 할 수 있습니까?jQuery로 필드가 비어있는 경우 보내기 버튼을 비활성화하려면

의사 코드에서 내 시도

if ($("input:empty")) { 
    $("input:disabled") 
} 
else 
    // enable the ask_question -button 

나는 적합한 솔루션

  1. Official docs about empty을 찾는없이이 기사를 읽고있다 : 그것은 모든 입력을 찾습니다 때문에이없는 같은 관련 -fields
  2. a thread about disabled -feature in jQuery : 이것은 관련있는 것으로 보입니다.
  3. to be able to test jQuery Firefox/terminal : 테스트 환경을 얻는 것이 가장 도움이 될 것입니다.

나는 지금 다음 코드를 사용합니다. 문자 ;에 관한 버그가 하나 있지만 찾을 수 없습니다.

# 1

$(document).ready(function(){ 
    $("#ask_form").validate(){ 
     rules: { 
      username { 
       required: true, 
       minlenghth: 2 
      }, 
      email: { 
       required: true; 
       minlength: 6 
      }, 
      password { 
       required: true,                                  
       minlength: 6 
      } 
     } 
    }); 
} 

# 2 MEDER의 코드 내가 slighhtly MEDER의 코드를 수정

. send 버튼이 영구적으로 비활성화되어 버그가 있습니다.

$(document).ready(function(){ 
    var inputs = $('input', '#ask_form'), empty = false; 
    // can also use :input but it will grab textarea/select elements and you need to check for those.. 

    inputs.each(function() { 
     if ($(this).val() == '') { 
      empty = true; 
      return; 
     } 
    }); 

    if (empty) { 
     $('.ask_question').attr('disabled', 'disabled'); // or true I believe. 
    } 
}); 

답변

10
var $submit = $("input[type=submit]"); 
if ($("input:empty").length > 0) { 
    $submit.attr("disabled","disabled"); 
} else { 
    $submit.removeAttr("disabled"); 
} 
+2

필드를 변경할 때마다 onChange 이벤트 또는 이와 유사한 이벤트를 넣어야합니다. –

+0

코드에서 버튼을 비활성화합니다. 그러나 필드가 비어 있지 않으면 단추도 비활성화됩니다. - **이 'input : empty) .length> 0'을 영어로 어떻게 읽나요? ** - 길이가 0보다 크도록 비어있는'input' 태그에 주어진 규칙을 적용하려합니다. - 내 생각이 모순으로 이어지기 때문에 이것은 나에게 이해가되지 않는다. –

+0

'.length> 0'을 제거했지만 버튼은 비활성화 된 상태로 유지됩니다. –

0
var inputs = $('input', 'form#foo'), empty = false; 
// can also use :input but it will grab textarea/select elements and you need to check for those.. 

inputs.each(function() { 
    if ($(this).val() == '') { 
     empty = true; 
     return; 
    } 
}); 

if (empty) { 
    $('#el').attr('disabled', 'disabled'); // or true I believe. 
} 
+0

코드에 Jason 's와 같은 문제가 있습니다. 'send' 버튼을 영구적으로 무효로합니다. –

-1

닫는 누락, 예 # 1이 시도 :

$(document).ready(function(){ 
    $("#ask_form").validate(){ 
     rules: { 
      username { 
       required: true, 
       minlenghth: 2 
      }, 
      email: { 
       required: true; 
       minlength: 6 
      }, 
      password { 
       required: true,                                  
       minlength: 6 
      } 
     } 
    }); 
}); 
관련 문제