javascript - Why does my click event need to be triggered twice? Waiting online, urgent! ! !

Question

As shown in the picture:
If you do not agree to the agreement and click the button in the lower right corner, you will not be able to release the delegation, and a dialog box will pop up. At the same time, set the button to the disabled attribute. (That is: disable the button)
Then I wrote a click event, and if the agreement is checked, the button will be restored.
Then a problem occurred at this time. How should I determine the event? I don't know how to trigger the second event to change the button to the disabled state.

At this time, I tried to write a click event, which can be triggered by clicking on the parent element of this radio button, that is, clicking on that piece. After triggering, the button in the lower right corner will be changed to clickable.

Then I discovered that after the button was disabled, I had to click it twice!

Later I discovered that if I disagree with the agreement in the first step, and then pop up the box, and then disable the lower right button,
I will make the label of the agreement selected and just click this time Once is enough!
However, in this case, the meaning is wrong. The website cannot click the button in the lower right corner without agreeing to the agreement. However, if the button is clicked, the website itself selects the agreement as agreed. Doesn't this force the user to agree to the agreement? ! So, can anyone help me find a solution? urgent! ! !

Below are pictures and codes:
Starting status:

Status after clicking:

The following is the code:

<p class="form-group">
    <p 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>
    </p>
</p>
<br>
<p class="row">
    <input type="submit" class="btn btn-info col-xs-offset-3" value="发布专项委托">
</p>


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

Answer 1

Laxative.

I wonder if this is what you want?

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

Answer 2

Same as above, I looked at the code and I know what it roughly means, but I don’t understand the question you expressed...

Answer 3

My expression skills are not good, bro

You only need to bind one click event of this button, determine the status of the radio in the callback, and then perform different processing. In addition, why do we need to use mouseup to bind events?

Answer 4

$('.zWt_release_agree').parent().mouseup(function()改成$('.zWt_release_agree').parent().click(function()That’s great, you try it, and I think the second binding event is unnecessary. If I do it, the button will be disabled by default, and then the checkbox will be bound to the click event. If the selected state is disabled, it will be false, otherwise it will be true

Answer 5

Thank you for the invitation.

Think about the logic a little bit~

1. Initial state, should btn be disabled by default? It will light up after checking.

2. Check the event. Are there independent form events available for the form? Does jQ provide relevant interfaces? Check the manual for this.

3. Continuing from the previous article, does checked need to be changed manually?

4. Boolean attribute is an inherent attribute and it is recommended to disable it by setting .prop() to false.

Answer 6

Can you describe it briefly? It’s really hard for you to talk so much.