javascript - 检查按钮是否被禁用以及是否在禁用时单击它的监听器，如果是，则弹出警报

Question

我是 Javascript 和 jquery 的新手，正在努力学习

我制作了一个提交按钮，当客户端不上传图片时该按钮保持禁用状态。它工作正常。 提交按钮称为 PROSEGUIR。 我想做的是...如果客户端在禁用时尝试单击 PROSEGUIR 按钮，它会弹出一条警告消息...但它不起作用。

查看 html 按钮:

<input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">

是吗？？ 现在，我在 jquery 之后写了这个监听器

<script>
   $(document).ready(function(){
      $("#proseguir").click(function(){
        if($(this).is('[disabled=disabled]') == true) {
          alert("Please upload an image before submitting");
        }
      });
   });
</script>

我做错了什么？因为它不工作。当用户在禁用的 PROSEGUIR 按钮(提交)中单击时，不会显示弹出警报...

请帮帮我!!

Answer 1

您可以使用 prop() 检查已禁用或者简单地通过 this.disabled 之类的，

$(document).ready(function(){
   $("#proseguir").click(function(){ 
      if($(this).prop('disabled')) {  // or use this.disabled
          alert("Please upload an image before submitting"); 
      }
   });
});

但是您不能在禁用的元素上触发点击事件。见片段，

$(document).ready(function() {
  $(".proseguir").click(function() {
    console.log(this.disabled);
    if ($(this).prop('disabled')) {
      alert("Please upload an image before submitting");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" disabled="disabled" name="proseguir" value="Prosseguir >>" class="bg-red btn_next_two proseguir"><br/>
<input type="submit" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two">

不是检查提交按钮 disabled 属性，而是验证您的输入文件元素，例如，

$(document).ready(function() {
  $("#proseguir").click(function() {
    var fileName = $('#pfile').val();
    if (fileName == '') {
      alert("Please upload an image before submitting");
      return false; // to prevent form submit
    } else {
      alert('File is: ' + fileName);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" name="pfile" id="pfile" class="bg-red btn_next_two proseguir" /><br/>
  <input type="submit" id="proseguir" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two" />
</form>