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

当元素禁用时，您无法捕获单击事件。你可以这样做：

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

的javascript：

$('#proseguir').click(function (event) {
    if ($(this).hasClass('is_disable')) {
        alert('do some stuff');
    } else {
        alert('do some stuff when is enable');
    }
});

当上传完成后，您可以删除is_disable课程 $('#proseguir').removeClass('is_disable')

Answer 2

您可以使用prop()或仅使用disabled来检查this.disabled，

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

但是您无法在已禁用的元素上触发点击事件。请参阅代码段，

＆＃13;

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

＆＃13;

<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">

＆＃13;

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

＆＃13;

$(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);
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 3

禁用的元素不会按设计触发事件，因此您无法捕获已禁用按钮的单击。

你可以保持按钮启用并以某种方式设置它，或者你可以通过在它上面放置另一个元素来伪造点击，就像这样

console.log

$(document).ready(function() {

  var inp = $('#proseguir'),
      div = $('<div />', {
          css: {
              height   : inp.outerHeight(),
              width    : inp.outerWidth(),
              top      : inp.offset().top,
              left     : inp.offset().left,
              zIndex   : 999
              position : 'absolute',
        
          },
          id : 'fakeBtn',
          on : {
              click: function() {
                  inp.trigger('click');
               }
          }
      }).appendTo(inp.parent());

  $('#uploadFiles').on('change', function() {
    $("#proseguir").prop('disabled', false);
    $('#fakeBtn').hide();
  });

  $("#proseguir").click(function() {
    if (this.disabled) {
      alert("Please upload an image before submitting");
    }
  });
});

监听器，检查按钮是否已禁用，如果在禁用时单击，如果是，则弹出警报

3 个答案: