【问题标题】:Disable button when no value in the input text输入文本中没有值时禁用按钮
【发布时间】:2017-08-01 01:54:42
【问题描述】:

当输入文本中没有插入值时,我需要禁用按钮

<form>
    <div class="form-group">             
        <p class="description">Please Enter Your Tracking Number.</p>

        <input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
    </div> 
    <br>
    <button type="submit" id="register" class="full-width btn-medium">Track</button>
</form>

试过了还是不行

<script>

function buttonState(){
    $("input").each(function(){
        $('#register').attr('disabled', 'disabled');
            if($(this).val() == "" ) return false;
        $('#register').attr('disabled', '');
    })
}

$(function(){
    $('#register').attr('disabled', 'disabled');
    $('input').change(buttonState);
})

</script>

【问题讨论】:

  • 也许这会有所帮助stackoverflow.com/questions/7067005/…
  • 我在表单上使用
  • 这也不好用 $(document).ready(function(){ $('button[type="submit"]').attr('disabled','disabled') ; $('input[type="text"]').change(function(){ if($(this).val != ''){ $('button[type="submit"]').removeAttr ('禁用'); } }); });

标签: jquery


【解决方案1】:

您可以使用keyup 事件根据值检查按钮的disabled 属性

$(document).ready(function(){
  $('#register').prop('disabled',true);
    $('#tracking-input').keyup(function(){
        $('#register').prop('disabled', this.value === "");     
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
      <p class="description">Please Enter Your Tracking Number.</p>
      <input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
  </div> <br>
  <button type="submit" id="register" class="full-width btn-medium">Track</button>
</form>

【讨论】:

  • 刚刚发现代码只能在网页版上运行,而不能在手机上运行
【解决方案2】:

$("#register").prop("disabled",true);

$("#tracking-input").keyup(function(){
var valuee=$("#tracking-input").val().trim();
if(valuee==""){
$("#register").prop("disabled",true);

}else{
$("#register").prop("disabled",false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
                <div class="form-group">

                    <p class="description">Please Enter Your Tracking Number.</p>

                    <input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)">
                </div> <br>
                <button type="submit" id="register" class="full-width btn-medium">Track</button>
            </form>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-07
    • 1970-01-01
    • 1970-01-01
    • 2018-03-20
    • 2017-02-04
    相关资源
    最近更新 更多