First on-click on checkbox displays modal popup window. How can i make on-second-click unchecks the checkbox?

Question

I am doing a popup window using Bootstrap modal that is triggered by the click of a checkbox in the main page. The popup window contains several textboxes for searching from the database based on user's input. Then after the input and the click of a search button, a table will display the data retrieved on the same popup window. Then, after the user chooses a row from the table, the chosen data will be displayed in their respective textboxes in the main page and the checkbox will be checked.

My plan is to uncheck the checkbox on a second click (thinking if the user suddenly decided to cancel their decision - checking the checkbox). I tried but it didn't uncheck the checkbox. Instead, the popup window comes out at every click of the checkbox and the checkbox won't uncheck anymore.

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

}

This is the checkbox input in the view page:

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

For the checkbox unchecking part, i also tried

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

But when i run, the checkbox is checked by default and unchecking doesn't work. Plus the modal popup window appears.

I also tried

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

Also same output as above code..can anyone help me out please? How can i fix this?

`if ($('#inputNewCheckbox').prop('checked', true) && $('#inputMother') != '') { if ($('#inputNewCheckbox').on("click", function () { document.getElementById("inputNewCheckbox").checked = false; })); }` looks very wrong. It is `if ($('#inputNewCheckbox').is(':checked'))` and you cannot use if on the event handler: `if ($('#inputNewCheckbox').on("click", function () {` and if you set the checkbox to false on click it will always be false ` — mplungjan, Jan 01 '17 at 07:49
@mplungjan Thanks for the advice. so what should i do to make it uncheck on second-click? I'm already out of ideas and i tried searching too but i couldn't find any that matches my situation — Nurul, Jan 01 '17 at 07:56
There are too many issues for me to dig through. One of the major issues is the horrible mix of DOM and jQuery. `$('#inputNew').on('hidden.bs.modal', function (e) { $("#inputNewCheckbox").prop("checked",true); $("#inputMother").show(); $("#inputMotherlabel").show(); var value = $('#myPopupInput1').val(); $('#inputMother').val(value); $('#inputNew').modal('hide'); });` — mplungjan, Jan 01 '17 at 08:04
@mplungjan so in other words, i should separate those two codes? — Nurul, Jan 01 '17 at 08:21
You need to clean your code - it may not help this issue, but it will certainly help you or other find it — mplungjan, Jan 01 '17 at 08:23

score 1 · Accepted Answer · answered Jan 01 '17 at 08:19

1

You're probably better off listening for a change event on the checkbox, and only showing your modal if the checkbox is checked:

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

    var _this = $(this);

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

        /* show your modal */

    }

});

See change - Event reference and the :checked pseudo-class on MDN.

answered Jan 01 '17 at 08:19

Tieson T.

20,774
6
77
92

That seems like a great idea! Why didn't i think of that? >.< Thanks for the example and article reference! :D I'll try it out – Nurul Jan 01 '17 at 09:28
It worked ;D thanks a lot! Could you help me on another problem regarding accessing external javascript file? This is the [link](http://stackoverflow.com/questions/41339088/javascript-code-doesnt-work-after-putting-the-code-as-external-file?noredirect=1#comment69912797_41339088) – Nurul Jan 02 '17 at 04:43

First on-click on checkbox displays modal popup window. How can i make on-second-click unchecks the checkbox?

1 Answers1