javascript - 为何我的点击事件要点两次才触发！在线等，急！！！

问题描述

问 题

如图：
如果没同意那个协议,点击右下角按钮,就不能发布委托,弹出对话框提示,与此同时,将按钮设置为disabled属性。(即：禁用按钮)
然后我又写了个点击事件,如果勾选了那个同意协议,让按钮恢复。
然后这个时候出现问题了,我该怎么判定事件呢,我不知道该怎么触发第二个事件将按钮改掉禁用状态了。

这个时候,我尝试写了个点击事件,就是点击这个单选框的父元素,也就是点击那一块,都可以触发,触发后,将右下角的按钮改为可以点击。

然后我发现,按钮被禁用后,我要点击两次才可以！

后来我又发现，如果我在第一步,就是不同意协议,然后弹框,然后将右下按钮disabled的时候,
我让那个协议的label为选中状态 这次只用点击一次就可以了！
然而,这样一来,意思又不对了,网站不点同意协议不能点右下角按钮,可是如果点击了按钮,网站自己把协议选中为同意状态,这不就是强制用户同意协议了？！所以,有没有老哥帮忙想想办法呀！急！！！

下边是图片和代码：
刚开始状态：

点击后状态：

下边是代码：

<div class="form-group">
    <div class="checkbox col-xs-offset-2">
        <label class="checkbox-inline">
            <input type="checkbox">
            <span class="text-danger">我已经阅读并同意</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" class="text-primary" target="_blank">《XXXXXXX隐私保护协议》</a>
        </label>
    </div>
</div>
<br>
<div class="row">
    <input type="submit" class="btn btn-info col-xs-offset-3" value="发布专项委托">
</div>


$('.zWt_release_agree').parent().mouseup(function(){
    if($('.zWt_release_agree').attr("checked")){
        $('.zWt_release_spec').attr({"disabled":false})
    }
})
$('.zWt_release_spec').mouseup(function(){
    if(!$('.zWt_release_agree').attr("checked")){
        alert('您必须同意《花瓣儿网隐私保护协议》后，才可以发布委托！')
        $('.zWt_release_spec').attr({"disabled":true})
        $('.zWt_release_agree').attr({"checked":true})
    }
})

解决方案

泻药。

不知这是不是你想要的？

https://jsfiddle.net/wcw5qo44/1/

(function () {
  var $button = $("button"), $check = $("input[type=checkbox]");
  $button.on('click', function () {
      if (!$check.is(":checked")) {
        $button.prop("disabled", true);
      alert('请勾选');
    } else alert('成功');
  });
    $check.on("change", function () {
      $button.prop("disabled", !$check.is(":checked"));
  });
  
})();

这篇关于javascript - 为何我的点击事件要点两次才触发！在线等，急！！！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！