代码之家 › 专栏 › 技术社区 › JLR

当输入字段有值时,从“提交”按钮中动态删除禁用的值

jquery-events event-handling validation forms jquery

JLR · 技术社区 · 7 年前

我有一张有效的表格。我不能点击提交按钮,除非在列表中输入16位数字 input 领域问题是,只有当我在输入字段外单击时,才可能单击提交。

我希望当用户输入最后一位数字时,“禁用”将自动删除,而无需首先单击输入字段外。我怎样才能做到这一点?

<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com">
    <div class="form">
        <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number"  onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
        <div class="notice"><span></span></div>
</div>
<input type="submit" value="ORDER" class="button" />
    </div>
</form>
<script>
var $j = jQuery.noConflict();

$j(function(){

$j(document).ready(function (){
    validate();
    $j('#inputNumber').change(validate);
    $j('.notice span').text('');
});

function validate(){
    if ($j('#inputNumber').val().length == 16) {
        $j("input[type=submit]").prop("disabled", false);
        $j("input[type=submit]").addClass("disabled-off");
        $j("input[type=submit]").removeClass("disabled-on disabled-colour");
        $j('.notice span').text('');
    }
    else {
        $j("input[type=submit]").prop("disabled", true);
        $j("input[type=submit]").addClass("disabled-on disabled-colour");
        $j("input[type=submit]").removeClass("disabled-off");
        $j('.notice span').text('More numbers is needed');
    }
}
});
</script>

1 回复 | 直到 7 年前

kukkuz 7 年前

change 您可以使用的侦听器 input 侦听器:

$j('#inputNumber').on('input', validate);

</div> ) 请参阅下面的演示:

var $j = jQuery.noConflict();

$j(function() {

  $j(document).ready(function() {
    validate();
    $j('#inputNumber').on('input', validate);
    $j('.notice span').text('');
  });

  function validate() {
    if ($j('#inputNumber').val().length == 16) {
      $j("input[type=submit]").prop("disabled", false);
      $j("input[type=submit]").addClass("disabled-off");
      $j("input[type=submit]").removeClass("disabled-on disabled-colour");
      $j('.notice span').text('');
    } else {
      $j("input[type=submit]").prop("disabled", true);
      $j("input[type=submit]").addClass("disabled-on disabled-colour");
      $j("input[type=submit]").removeClass("disabled-off");
      $j('.notice span').text('More numbers is needed');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com">
  <div class="form">
    <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"
    />
    <div class="notice"><span></span></div>
  <!--</div>-->
  <input type="submit" value="ORDER" class="button"/>
  </div>
</form>