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

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

}

这是 View 页面中的复选框输入:

<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 */

    }

});

参见change - Event reference和 :checked pseudo-class在 MDN 上。