Question

我是javascript和jquery的新手我有一个表单，只有一个文本框，类型是电子邮件，我有一个提交按钮。单击提交按钮后，文本框中的值不会消失，我不想（不清除表单）。现在我的问题是按钮应该在点击后禁用，它应该仅激活文本框更改中的值。

我的代码是

  <input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">

  <button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button></div>

jquery是

$(document).ready(function(){
  $("input[name='email']").change(function(){
    if ($(this).val() != $(this).val())
    {
       $("input[name='submit']").removeAttr('disabled');
    }
  });
});

请帮助解决这个问题。

Answer 1

因为以下陈述$(this).val() != $(this).val()将始终为假。

您不需要这样做，因为change功能已经满足您的需要。

$(document).ready(function(){
    $('#g-email').on('input', function(){
        $("button[name='submit']").removeAttr('disabled');
    });
});

工作示例

$(document).ready(function(){
  $('#g-email').on('input', function(){
     $("button[name='submit']").removeAttr('disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">

<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>

Answer 2

使用jQuery .prop()方法更改提交按钮disabled值：

var submit = $("#messageButton");
var input  = $("#g-email");

input.on("keyup", function(ev) {
  
  var isDisabled = submit.data("submitted") && submit.data("submitted") === input.val();
  submit.prop("disabled", isDisabled);

});

submit.on("click", function(ev) {

  submit.prop("disabled", true);
  submit.data("submitted", input.val());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button>

Answer 3

您最初可以设置messageButton已停用，并在keyup输入中收听g-email事件。然后，如果输入g-email启用了文本，则按钮会禁用它：

＆＃13;

$(document).ready(function(){
  $('#g-email').on('keyup', function(){
    if($(this).val()){
      $("#messageButton").removeAttr('disabled');
    } else {
      $("#messageButton").attr('disabled', true);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">

<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>

＆＃13;

如何检查输入框是否具有相同的值

3 个答案: