Question

我正在研究一个项目，我想要实现的是当textfield2的值小于textfield1中的值时，必须启用该按钮，我知道需要jquery或javascript来实现这一目标

<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
   <tr>
      <td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
         <div align="left"></div><label></label>
      </td>
      <td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
            <input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
            <div></div>
      </td>
   </tr>
   <tr>
       <td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
       <td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
            <input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password">
       </td>
   </tr>
   <tr>
      <td colspan="2" align="right" class="redtext"><button disabled>Submit</button></td>
   </tr>
</table>

任何帮助？

Answer 1

使用keyup标识input
上的更改

parseFloat解析字符串参数并返回浮点数

.prop()为每个匹配的元素设置一个或多个属性

试试这个：

$('#Textfield1,#Textfield2').on('keyup', function() {
  var btn = $('button.mybutton');
  if (parseFloat($('#Textfield1').val()) > parseFloat($('#Textfield2').val())) {
    btn.prop('disabled', false);
  } else {
    btn.prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
  <tr>
    <td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
      <div align="left"></div>
    </td>
    <td width="291" align="center" bgcolor="#F9F9F9" class="redtext">
      <div align="left">
        <input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
      </div>
    </td>
  </tr>
  <tr>
    <td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
    <td bgcolor="#F9F9F9" class="redtext">
      <label for="Textfield2"></label>
      <input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password">
    </td>
  </tr>
  <tr>
    <td colspan="2" align="right" class="redtext">
      <button disabled class='mybutton'>Submit</button>
    </td>
  </tr>
</table>

Fiddle here

Answer 2

function enableBtn(){
      textBox1 = parseFloat($("#Textfield1").val());
      textBox2 = parseFloat($("#Textfield2").val());
      if(textBox1 > textBox2)
      {
         $(".redtext button").prop("disabled", false); 
      }else{
         $(".redtext button").prop("disabled", false); 
      }
}

$('#Textfield2, #Textfield1').on('input',function(e){
   enableBtn();
});

Answer 3

试试这个Demo

＆＃13;

$('#Textfield2, #Textfield1').on('keypress',function(){
   var text1 = parseInt($('#Textfield1').val());
   var text2 = parseInt($('#Textfield2').val());

   var btn = $('.redtext > button');
   if(text1 > text2){
     btn.prop('disabled', false);
   }else{
      btn.prop('disabled', true);
   }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
        <tr>
          <td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
            <div align="left"></div>
            </label></td>
          <td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
            <input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
            </div></td>
        </tr>
        <tr>
          <td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
          <td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
            <input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password"></td>
        </tr>
        <tr>
          <td colspan="2" align="right" class="redtext"><button disabled>Submit</button></td>
          </tr>
      </table>

＆＃13;

Answer 4

试试这个：

HTML

    <table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
        <tr>
          <td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
            <div align="left"></div>
            </label></td>
          <td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
            <input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
            </div></td>
        </tr>
        <tr>
          <td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
          <td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
            <input name="Textfield2" type="text" class="textbox" id="Textfield2" placeholder="Enter your number"></td>
        </tr>
        <tr>
          <td colspan="2" align="right" class="redtext"><button disabled class=
"disabledButton">Submit</button></td>
          </tr>
      </table>

使用Javascript：

 $('#Textfield2').keyup(function(){
     var textBox1 = $('#Textfield1').val();
     var textBox2 = $('#Textfield2').val();
     if(textBox2>textBox1){
       $('.disabledButton').prop("disabled", false);
     }
});

Answer 5

null

试试这个!!

如果textfield 1中的值大于textfield 2

5 个答案: