Question

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

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

hibernate-core 5.2

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

$('#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;
            }));               
    }

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

Answer 1

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

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

    var _this = $(this);

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

        /* show your modal */

    }

});

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

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

1 个答案: