Question

所以我创建了一个网站，现在我正在尝试使用jQuery mobile创建该网站的移动版本，稍后使用phonegap

我遇到的问题是在我的表单上，在网站版本中，当我更改表单上的元素时，下一个表单元素变为启用但我无法使其在JQuery Mobile版本上工作

此处的工作代码（网站）：

JS

if (fname!=="")
{
  document.forms["myForm"]["lname"].disabled=false;
  event.returnValue=false;
}
else if (fname=="")
{
  document.forms["myForm"]["lname"].disabled=true;
  event.returnValue=false;
}

HTML：

<p>
   <tr>
       <td>
           <label>First name:</label>
       </td>
       <td> 
           <input name="fname" type="text" required id="fname" placeholder="Enter your First Name" onmouseleave="validateonchange()"  />
       </td>
   </tr>
   <p>
      <tr>
          <td>
              <label>Last name:</label> 
          </td>
          <td>
              <input name="lname" type="text" disabled="disabled" required id="lname" placeholder="Enter your Last Name" onmouseleave="validateonchange()"/>
          </td>
      </tr>
   </p>

和我正在努力工作的代码（JQuery Mobile）：

html

 <form name="MobileForm" onSubmit="return mvalidateForm()" method="post";>
    <div data-role="fieldcontain">
        <label for="textinput">First Name:</label>
        <input type="text" name="textinput" id="fname" onChange="mvalidateForm()" class="required" value=""  />
    </div>
    <div data-role="fieldcontain">
        <label for="textinput2">Last Name:</label>
        <input type="text" name="textinput2" id="lname" onChange="mvalidateForm()" value="" disabled  />
    </div>

JS

function mvalidateForm()
{ 
    var fname = document.forms["MobileForm"]["firstname"].value;

    if (fname!=="")
        {
            document.forms["MobileForm"]["firstname"].disabled=false;
            event.returnValue=false;
        }
    else if (fname=="")
    {
        document.forms["MobileForm"]["firstname"].disabled=true;
        event.returnValue=false;
    }
}

如果有任何帮助我将会非常感激

Answer 1

使用jQuery Mobile textinput小部件的 enable 和 disable ：

function mvalidateForm()
{ 
    var fname = $.trim($("#fname").val());
    if (fname && fname.length > 0) {
        $("#lname").textinput( "enable" );
        event.returnValue=false;
    }
    else  {
        $("#lname").textinput( "disable" );    
        event.returnValue=false;
    }
}

这是一个有效的 DEMO

P.S。

您可能希望使用onKeyUp而不是更改事件。

JQuery mobile - 在变更时启用表单元素

1 个答案:

P.S。