jQuery Mobile을 사용하여 유효한 양식의 제출 버튼 활성화

Question

jQuery Mobile, 버튼 및 양식에 대한 많은 설명서를 읽었지만 모든 것을 이해하지 못했습니다. 따라서 양식 응답이 유효하지 않을 때까지 제출 단추를 비활성화하고 싶습니다.

여기 내 작업 코드는 ...

$(document).ready(function() 
{ 
    /* $('#submit').button('enable') */ /* Console says "Uncaught TypeError: Object [object Object] has no method 'button'" */ 
    $('#submit').attr("disabled", true); 
    /* Do stuff */ 
    $('#form').live('keyup change', function() 
    { 
    if (isEmailValid && isTextValid) 
    { 
     /* $('#submit').attr("disabled", false); */ /* Button is not enable */ 
     $('#submit').button('enable'); 
    } 
    }); 
}) 
... 
<div class="content-primary"> 
    <form id="form"> 
    <button data-theme="a" id="submit" type="submit">Submit</button> 
    </form> 
</div> 

내 코드는 크롬, 파이어 폭스와 인터넷 익스플로러에서 일하고,하지만 난 논리를 이해하지 않는다 : 나는 끄고 다르게 제출 켜십시오!

그러나 내 솔루션이 맞습니까?

도움 주셔서 감사합니다.

건배,

V.

Answer 1

당신은 버튼 위젯 제출 활성화 및 비활성화하기 위해 jQuery를 모바일 button() 기능을 사용할 수 있습니다 : http://jsfiddle.net/tewV6/

: 여기

$(document).delegate('[data-role="page"]', 'pageinit', function() { 
    var $submit = $(this).find('#submit'), 
     $text = $(this).find('input[type="text"]'); 
    $text.bind('keyup', function() { 
     if (this.value == '') { 
      $submit.button('disable'); 
     } else { 
      $submit.button('enable'); 
     } 
    }).trigger('keyup'); 
}); 

는 데모입니다 또한 jQuery Mobile을 사용할 때 document.ready 이벤트 핸들러를 사용하지 않으려합니다. 대신 위 예제에서와 같이 data-role="page" 요소를 대상으로 pageinit을 사용하십시오.