首先单击复选框显示模式弹出窗口。如何使第二次单击取消选中该复选框？

Question

我正在使用通过单击主页中的复选框触发的 Bootstrap 模式弹出窗口。弹出窗口包含几个文本框，用于根据用户输入从数据库中搜索。然后在输入并单击搜索按钮后，表格将在同一个弹出窗口中显示检索到的数据。然后，用户从表格中选择一行后，选择的数据将显示在主页面各自的文本框中，并且复选框将被选中。

我的计划是在第二次单击时取消选中复选框（考虑用户是否突然决定取消他们的决定 - 选中复选框）。我试过了，但它没有取消选中该复选框。相反，每次单击复选框都会弹出窗口，并且复选框不会再取消选中。

$('#inputNew').on('hidden.bs.modal', function (e) {
  document.getElementById("inputNewCheckbox").checked = true;
  document.getElementById("inputMother").style.display = 'block';
  document.getElementById("inputMotherlabel").style.display = 'block';
  var value = $('#myPopupInput1').val();
  $('#inputMother').val(value);
  $('#inputNew').modal('hide');
});

$('#inputNew').on('click', '#SearchMother', function () {
  var value = $('#myPopupInput1').val();
  $('#inputMother').val(value);
  $('#inputNew').modal('hide');
});

if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
  if ($('#inputNewCheckbox').on("click", function () {
    $('#inputNewCheckbox').prop('checked', false);
  }));

}

这是视图页面中的复选框输入：

<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New

对于复选框取消选中部分，我也尝试过

if ($('#inputNewCheckbox').prop('checked', true) && $('#inputMother') != '') {
        if ($('#inputNewCheckbox').on("click", function () {
                    document.getElementById("inputNewCheckbox").checked = false;
            }));               
    }

但是当我运行时，该复选框默认处于选中状态，而取消选中则不起作用。加上模态弹出窗口出现。

我也试过了

if (document.getElementById("inputNewCheckbox").checked = true && $('#inputMother') != '') {
        if ($('#inputNewCheckbox').on("click", function () {
                    document.getElementById("inputNewCheckbox").checked = false;
            }));              
    }

也与上面的代码相同的输出..有人可以帮帮我吗？我该如何解决这个问题？

Answer 1

您可能最好在复选框上监听更改事件，并且仅在选中复选框时显示您的模式：

$('#inputNewCheckbox').on('change', function(e){

    var _this = $(this);

    if(_this.is(':checked')){

        /* show your modal */

    }

});

请参阅 MDN 上的 change - Event reference 和 :checked pseudo-class。