jQuery检测点击禁用提交按钮

时间：2011-10-20 09:31:37

标签： jquery forms submit

小提琴：http://jsfiddle.net/ugzux/

正如您所看到的，我有一个带有禁用（通过javascript）提交按钮的表单。

我希望能够将click事件绑定到它，所以我可以在我允许提交表单之前做一些jazzy指示输入需要修复的内容（即再次启用该按钮）

然而，禁用提交按钮也显然会禁用绑定到按钮的任何点击事件，即使它们在禁用后被绑定 - 任何想法如何解决这个问题？

实际上，一种解决方案是停止禁用该按钮，而是使用

的事件 
$('form').submit(function(event){
    event.preventDefault(); 
});

但是我想知道禁用输入和javascript事件的来龙去脉，如果有解决方法，因为我之前从未遇到过这种行为。

10 个答案:

答案 0 :(得分：45)

在此question -

中找到此信息
  

Firefox以及其他浏览器可能会禁用表单字段上的DOM事件   被禁用。从禁用的表单字段开始的任何事件都是   完全取消并且不会传播DOM树。纠正我   如果我错了，但是如果你点击禁用按钮，则来源   事件是禁用按钮，完成点击事件   歼灭。浏览器字面上不知道点击的按钮，   也没有通过点击事件。这就像你点击一个   网页上的黑洞。

我认为你可以通过将按钮包装在div中并在div的click事件上触发逻辑来“伪造”一次点击。但是，如上所述，禁用元素上的事件似乎没有冒出DOM树。

答案 1 :(得分：10)

我发现这样做的最好方法是使用“禁用”类来禁用该按钮。然后，您可以通常在jquery中捕获单击事件。如果是$(this).hasClass('disabled')，则会执行“爵士指示”内容以及event.preventDefault();一旦用户完成了他们的操作，您可以removeClass('disabled')'按钮'input[type="submit"]。简单！

答案 2 :(得分：7)

您可以在提交按钮周围添加一个div，并在禁用提交按钮时附加一个单击功能：

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
    if (attr('submit-button', 'disabled') == 'true')
    {
        alert('Button Disabled')
    }
});

这只是我头脑中的代码，所以它可能不完全正确。但你明白了。

答案 3 :(得分：2)

$(document).on('click', '.wrapper-of-disabled-button', function(){
  if ($(this).find('button.disabled').length > 0) {
    // Do your magic on the parent -> $(this)
  }
});

你走了;）

答案 4 :(得分：0)

结合使用所需复选框的其他解决方法可能是：

<input type="checkbox" class="einwilligung" name="einwilligung" value="ja"/>
<div class="einwilligung_hinweis">U need to check this box</div>
<div class="button_outer">
        <input type="submit" name="submit" value="Senden" id="submitButton" disabled="disabled" class="nope btn" />
        <span class="button_overlay"></span>
 </div>

<强> CSS-魔术 

#submitButton{
display:inline-block;
color:#D00019;
width:160px;
z-index:30;
position:absolute;
display:block;
top:0;
left:0;
height:30px;
outline:none;
}

#submitButton.nope{
z-index:10;
color:#333;
}

.button_outer {
width:162px;
height:32px;
z-index:50;
position:relative;
}

span.button_overlay{
display:block;
height:30px;
width:162px;
position:absolute;
top:0;
left:0;
background:#fff;
opacity:0.3;
filter: alpha(opacity=30);
z-index:20;
}

.einweilligung_hinweis_error{
color:red;
}

<强> jQuery的东西 

(document).ready(function() {

  $('.einwilligung').click(function() {
    var buttonsChecked = $('.einwilligung:checked');
    if (buttonsChecked.length) {
      $('#submitButton').removeAttr('disabled');
      $('#submitButton').removeClass('nope');
      $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
    }
    else {
      $('#submitButton').attr('disabled', 'disabled');
      $('#submitButton').addClass('nope');
    }
  });

  $('.button_outer').click(function(){
     if($('#submitButton').hasClass('nope')){
          $('.einwilligung_hinweis').addClass('einweilligung_hinweis_error');
      }else{
          $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
      }
  });

});

也许不是最先进的技术，但效果还不错！

  • 需要检查复选框，以便为提交按钮提供更高的z-index
  • 如果没有，上面有一个button_overlay，上面有一个点击事件，用于突出显示该消息

答案 5 :(得分：0)

使按钮readonly可以提供帮助，因为将触发click事件。虽然要注意differences in behaviour。

<input type="submit" value="Submit" readonly="readonly" />

答案 6 :(得分：0)

你应该使用.disabled类来设置要禁用的样式元素，然后在你的JS代码中使用.hasClass（＆＃39; .disabled＆＃39;）来处理它。 只要你没有把指针 - 事件：没有;＆＃34;它就可以工作。你的css代码声明为.disabled class

答案 7 :(得分：0)

我有一个比较复杂但与您相似的用例：

  1. 屏幕上有很多提交按钮，但是默认情况下，它们被禁用
  2. 用户需要点击同意复选框以启用按钮
  3. 可以打开/关闭同意复选框
  4. 点击复选框后，他们可以点击所有提交按钮

使用jQuery，我已经完成了将按钮与div重叠，然后将div换成了另一个div

请参见下面的演示

var toggleNeedConsent = function() {
  var isEnableCheckbox = $('#consent-confirm-checkbox').prop('checked');
  $('.needConsentButton').prop('disabled', !isEnableCheckbox);
  if (!isEnableCheckbox) {
    if (!$(".needConsentButtonOutterDiv").length) {
      $('.needConsentButton').wrap("<div class='needConsentButtonOutterDiv' style='display: inline-block; position:relative'></div>");
    }
    $('.needConsentButton').after('<div class="needConsentButtonDiv" style="position:absolute; top:0; left:0; width: 100%; height:100%; ;"></div></div>');

    $('.needConsentButtonDiv').click(function(e) {
      alert('Please accept the consent first');
    })
  } else {
    $(".needConsentButtonDiv").remove();
  }
}

$(function() {
  toggleNeedConsent();
  $('#consent-confirm-checkbox').click(function() {
    toggleNeedConsent();
  });

  $("#approveButton").click(function() {
    alert('You are a wizard, Harry!');
  })

  $("#approve2Button").click(function() {
    alert('Harry, you are a wizard!');
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click consent checkbox before approve! <input type="checkbox" id="consent-confirm-checkbox">
<br/>
<br/>

<button class="needConsentButton" id="approveButton">Approve Form1!</button>

<br/>
<br/>
<button class="needConsentButton" id="approve2Button">Approve Form2!</button>

关于这种方法的好处：

  • 只需为禁用按钮添加一个类，其他HTML保持不变
  • 可以一次同意多个按钮
  • 实际上是禁用了该按钮，而不是使用花哨的自定义方法，这使外部库能够理解并相应地创建CSS

答案 8 :(得分：0)

css 

<div class="grid-calendar">

  <div class="row calendar-week-header">
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Monday</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Tuesday</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Wednesday</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Thursday</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Friday</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Saturday</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span class="hd">Sunday</span></div>
      </div>
    </div>
  </div>


  <div class="row calendar-week">
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span></span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span></span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span></span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell " style="background-color: #dddada;">
      <div>
        <div><span>1</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>2</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>3</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>4</span></div>
      </div>
    </div>
  </div>



  <div class="row calendar-week">
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>5</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>6</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>7</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>8</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>9</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>10</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>11</span></div>
      </div>
    </div>
  </div>



  <div class="row calendar-week">
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>12</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>13</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>14</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>15</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>16</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>17</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>18</span></div>
      </div>
    </div>
  </div>



  <div class="row calendar-week">
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>19</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>20</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>21</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>22</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>23</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>24</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>25</span></div>
      </div>
    </div>
  </div>



  <div class="row calendar-week">
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>26</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>27</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>28</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>29</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>30</span></div>
      </div>
    </div>
    <div class="col-xs-1 grid-cell">
      <div>
        <div><span>31</span></div>
      </div>
    </div><span></span></div>
</div>

html 

[disabled]{
pointer-events:none;
}

您可以尝试单击按钮

<span class="button"><input type="submit" disabled /></span>

答案 9 :(得分：-1)

只是不要禁用该按钮，但阻止提交表单。看起来你正在尝试验证表单;当你让JS接管提交动作并返回false时，表单将不会被提交

相关问题
最新问题