使用Checkbox自定义提醒 - Javascript

时间:2015-10-14 17:09:35

标签: javascript jquery html

我正在尝试弹出一个警告弹出窗口,其中有一个复选框,用户需要在其中检查并单击“提交”以继续。

我使用 div标记来定义必须在警报上显示的警报消息,然后编写一些java脚本来返回值。

带有警告信息的div标签:

<div id="confirm_popup" style="color:red">
  <input type="checkbox" id="myCheckBox" /> Check in to confirm the following actions to take place and click OK
  <div style="margin-top: 15px; font-weight: bold; color:red; ">
    <p>* You will not be able to make additional changes to your current reporting period. It is very important to review your credits. </p>
    <p>* A new two-year reporting period tab will open. </p>
  </div>
</div>

我的javascript代码:

<script type="text/javascript">

  $('#close_record').submit(function() {
    var status = false
      $("#confirm_popup").html("Hi message!!!").dialog({
          modal: true,
          title: 'Alert Message', zIndex: 10000, autoOpen: true,
          width: 'auto', resizable: false,
          buttons: {
              Ok: function () {
                  $(this).dialog("close");
                  if ($('#myCheckBox').is(":checked")){
                    status = true
                  }
              },
          },
          close: function (event, ui) {
              $(this).remove();
          }
      });

    if(status == true){
      return true
    }
    else {
      false
    }
  })

</script>

close_record是我有提交按钮的表单的ID。我正在使用表单提交操作来触发弹出的javascript。

但由于某种原因,这是行不通的..我已经尝试了所有可能的方法,我能想到并且没有任何帮助..任何帮助都表示赞赏!

由于

2 个答案:

答案 0 :(得分:0)

您需要在对话框关闭后触发submit事件。

在OK功能中,您需要检测复选框,然后执行以下操作:

  $('#yourForm').trigger('submit');

避免异步方法中的变量,该值不是您需要的或您的想法。

答案 1 :(得分:0)

请改为尝试:

<form id="close_record">
    <input type="checkbox" style="display: none" id="myCheckBoxForm" />
    <input type="submit" value="go" />
</form>
<div id="confirm_popup" style="color:red">
    <input type="checkbox" id="myCheckBox" />Check in to confirm the following actions to take place and click OK
    <div style="margin-top: 15px; font-weight: bold; color:red; ">
        <p>* You will not be able to make additional changes to your current reporting period. It is very important to review your credits.</p>
        <p>* A new two-year reporting period tab will open.</p>
    </div>
</div>

和JS:

 $('#close_record').submit(function (e) {

      if ($('#myCheckBoxForm').is(":checked")) {
          return true;
      } else {
          e.preventDefault();
      }

      $("#confirm_popup").dialog({
          modal: true,
          title: 'Alert Message',
          zIndex: 10000,
          autoOpen: true,
          width: 'auto',
          resizable: false,
          buttons: {
              Ok: function () {
                  $(this).dialog("close");
                  $('#myCheckBoxForm').prop('checked', $('#myCheckBox').prop('checked'));
              },
          }
      });

  })