PreventDefault 在复选框 "onchange" 后不起作用

Question

我正在我的模式中开发签名板 jQuery 插件。我必须通过我的签名批准处方。我还有一个复选框用于默认签名。如果我在目录中有任何我的签名图像，它将在带有默认复选框 "checked" 的模态上显示该图像。有两种可能性，要么我有默认签名，要么没有： 1.使用默认签名 2. 取消选中复选框并添加新签名。如果签名板在任何情况下都是空的，则表单将不会提交并会提示错误消息。

我的 onchange 功能有问题，当我将复选框状态更改为 "uncheck" 时，会显示签名板 div，如果我将其留空并按保存按钮，它会提示我错误信息。但是，当我再次 "check" 和 "uncheck" 复选框时， "PreventDefault" 功能不起作用，并且提交的表单带有任何空的签名板。

我的JavaScript代码：

$('.already_signed').change(function(event) {
    if (this.checked) {
        $('.sign').hide(); // hide signaturepad
        $(".already_signed").attr("checked", true); // checked the checkbox
         $('.default_img').show(); // show the default image
        document.getElementById('save').addEventListener("click", function (event) {
            $('#sign_image').val(''); // if form is submitted with default signature keep the signature-pad hidden image input empty  
            document.getElementById('signature_alert').style.display = 'none'; // hide the error message as well
            $('#signature_form').submit();
          });

    } else {
        $('.sign').show(); // show signature-pad
        $(".already_signed").attr("checked", false); // unchecked the checkbox
        $('.default_img').hide(); // hide the default image

                             // jquery signature

          var wrapper = document.getElementById("signature-pad"),
          clearButton = wrapper.querySelector("[data-action=clear]"),
          savePNGButton = wrapper.querySelector("[data-action=save-png]"),
          saveSVGButton = wrapper.querySelector("[data-action=save-svg]"),
          canvas = wrapper.querySelector("canvas"),
          signaturePad;
          signaturePad = new SignaturePad(canvas);

          document.getElementById('save').addEventListener("click", function (event) {

                if (signaturePad.isEmpty()) {
                    event.preventDefault();
                    var timePeriodInMs = 3000;

                    setTimeout(function() 
                    { 
                        document.getElementById("signature_alert").style.display = "none"; 
                    }, 
                    timePeriodInMs);
                  document.getElementById('signature_alert').style.display = 'block';
                }

                document.getElementById('signature_image').src = signaturePad.toDataURL(); 
                var image =   document.getElementById('signature_image').src;
                document.getElementById('sign_image').value = image;  
          });
    }
});

我也把return设置为false，但是表单还是提交了。我深陷其中，如果你们中的任何人能帮助/指导我，我将不胜感激。谢谢，

Answer 1

尝试在未选中复选框时禁用按钮，并在用户开始在手写板上书写时启用按钮。

$('.already_signed').change(function(event) {
if (!$("#checkbox").is(":checked")) {
$('input[type=submit]').attr('disabled', 'disabled');
}
});
var canvas = document.querySelector("canvas");

var signaturePad = new SignaturePad(canvas);
signaturePad.onBegin({$('input[type=submit]').removeAttr('disabled');});

PreventDefault 在复选框 "onchange" 后不起作用

PreventDefault not working after checkbox "onchange"

javascript

jquery

onchange

preventdefault