javascript - Wordpress TinyMCE 去除 OnClick 和 OnChange(需要 jQuery)

Question

搜索了很长时间来找到解决方案，但找不到适合我需求的解决方案，所以如果我错过了某些内容，请道歉。

在我的 WordPress 网站上，我有一个带有按钮的页面，为了跟踪该按钮的链接，需要选中一个复选框。这是它的代码...

<form action="#"><input onchange="toggleAccept()" id="agreeCheckbox" type="checkbox" /><label for="agreeCheckbox">I agree to the terms</label></form>

<a href="link/?cbur=a" id="accept" onclick="mustAccept(); return false;"><img src="button.png"/></a>

头部还有一些处理此问题的代码:

    <script type="text/javascript">
function toggleAccept() {
var acceptLink = document.getElementById("accept");
var agreeCheckbox = document.getElementById("agreeCheckbox");
if (agreeCheckbox.checked) {
acceptLink.onclick=function() {
window.location=this.href + "&cbrblaccpt=true";
return false;
}
} else {
acceptLink.onclick=function() {
mustAccept();
return false;
}
}
}
function mustAccept() {
window.alert("Please check the box and agree to the payment terms of this recurring product.");
}

cbrblaccpt
  </script>

基本上，如果有人尝试单击底部而不选中该框，则会出现上面的弹出窗口。一旦他们选中该框，他们就会被带到按钮的链接。

我遇到的问题是 TinyMCE 正在删除代码的“onchange”和“onclick”部分。我猜是因为它不喜欢内联 Java 的存在。

经过大量研究后，在我看来，理想的解决方案是在单独的文件中使用 jQuery 来处理这个问题，但我完全不知道如何做到这一点。

如果有人可以在这方面提供帮助，或者提供其他解决方案，那么我会洗耳恭听。

非常感谢

Answer 1

嗯...是的，你可以用纯 jQuery 来处理它。

我给你举了一个例子:

请记住将 jQuery 库添加到您的文档中，就在 <script> 之前如果可能的话，就在 </body> 之前结束 HTML 标签 :D

jQuery:

<script>
    $(document).ready(function () {
    var agree = $("#accept"); //we cache the element, dont worry

    $("#agreeCheckbox").click(function () {
        var checked_status = this.checked;
        if (checked_status === true) {
            agree.removeAttr("disabled");
        } else {
            agree.attr("disabled", "disabled");
        }
    });
    //we convert the button into an anchor
    agree.click(function () {
        window.location = $(this).data("href") + "&cbrblaccpt=true";
        });
    });
</script>

CSS:因为我们使用按钮而不是 anchor ( <a></a> )

#accept {
    background: url(http://goo.gl/kCsKU3) center top no-repeat;
    color: #FFF;
    display: block;
    width: 200px;
    height: 44px;
    border:none;
    outline: none;
    cursor: pointer;
}
#accept:disabled {
    opacity: 0.6;
}
#accept:active {
    margin-top:2px;
}

最后，HTML:请注意，我们正在使用 data-href链接的属性而不是简单的 href因为这是一个按钮，不再是 anchor 。

<input id="agreeCheckbox" type="checkbox" />
<label for="agreeCheckbox">I agree to the terms</label>
<button data-href="link/?cbur=a" id="accept" disabled="disabled"></button>

JsFiddle:http://jsfiddle.net/n2zej2cg/