이전 필드가 비어있는 경우 텍스트 입력 필드 사용 안 함

Question

이름 필드가 먼저 입력되지 않으면 중간 이름 필드를 사용하지 않도록 설정하고 있습니다. 다음 코드는 jQuery Mobile 응용 프로그램에서 사용할 수 없도록 설정되어 있지만 입력 한 내용은 첫 번째 이름 필드가 채워져 있으면 이름이 비어 있고 중간 이름 필드가 회색으로 유지되는 경우에도 여전히 텍스트를 추가 할 수 있습니다. 어떤 도움이라도 대단히 감사합니다. 감사!

HTML :

<form id="search-form" name="search-form" method="post"> 
     <div class="formBox"> 
     <div data-role="fieldcontain"> 
      <label for="firstName">First Name</label><br/> 
      <input type="text" name="firstname" id="firstNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="middleName">Middle Name</label><br/> 
      <input type="text" name="middleName" id="middleNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="lastName">Last Name <span class="required">(Required - Must be exact match)</span></label><br/> 
      <input type="text" name="lastname" id="lastNameCriteria" value="" /> 
     </div> 
     </div> 

     </div> 
    </form> 

JS는 : 하나 개의 텍스트 필드가 있기 때문에

$('#firstNameCriteria').each(function() { 
     if ($(this).val() == '') { 
      $('#middleNameCriteria').addClass('ui-disabled'); 
      $('#middleNameCriteria').disable('input'); 
     } else { 
      $('#middleNameCriteria').removeClass('ui-disabled'); 
     } 
    }); 

Answer 1

jQuery를 모바일이는 jQuery를 모바일 프레임 워크에 의해 초기화 된 폼 요소/비활성화 가능하게하는 자신의 헬퍼 방법입니다 : http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/methods.html

을 여기

//bind event handler to first text input 
$('#firstNameCriteria').bind('keyup', function() { 

    //enable or disable the next element based on the value of this one 
    var state = (this.value == '') ? 'disable' : 'enable'; 
    $("#middleNameCriteria").textinput(state); 
}); 

는 데모입니다 : http://jsfiddle.net/ycUnv/

당신은 당신이 원하는대로 이벤트 사용할 수 있습니다; change은 텍스트 입력이 흐려지고 값이 변경되면 실행됩니다. keyup은 사용자가 키를 누르고 입력 값이 업데이트 된 직후에 실행됩니다.

또한, 귀하의 HTML이 보이게하는 방법이며, 추가로 폐쇄 </div> 태그가 : 나는 '각'이 필요하지만 일하는 것이 무엇인지 찾을 수 없습니다 생각하지 않았다

<form id="search-form" name="search-form" method="post"> 
    <div class="formBox"> 
     <div data-role="fieldcontain"> 
      <label for="firstName">First Name</label><br/> 
      <input type="text" name="firstname" id="firstNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="middleName">Middle Name</label><br/> 
      <input type="text" name="middleName" id="middleNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="lastName">Last Name <span class="required">(Required - Must be exact match)</span></label><br/> 
      <input type="text" name="lastname" id="lastNameCriteria" value="" /> 
     </div> 
    </div> 
</form> 

Answer 2

당신은 each 기능을 필요가 없습니다. 이 경우 업데이트를 어떻게 시작합니까? 일반적으로 keyup 이벤트와 같은 이벤트가 필요합니다. prop 함수 (최신 버전의 jQuery에서)를 사용하여 disabled 속성을 설정할 수도 있습니다. 이 같은

뭔가 (1.6 + jQuery를에) 작동합니다 :

$("#firstNameCriteria").keyup(function() { 
    if($(this).val() == '') { 
    $("#middleNameCriteria").addClass('ui-disabled'); 
    $("#middleNameCriteria").prop("disabled", true); 
    } else { 
    $("#middleNameCriteria").removeClass('ui-disabled'); 
    $("#middleNameCriteria").prop("disabled", false); 
    } 
});