Jquery to check checkbox only works the first time you click it

Question

I'm building a system where the checkbox input will actually be an image, so to check the checkbox, the user would have to click the label(the image would be part of it).

I've written a small code in Javascript with Jquery, and it works initially, but if the user unchecks and wants to check again, it's a nops. Give it a try please, you'll understand it more easily.

I can't share the system so instead I've put just the necessary parts below (no images, just the problem above described - notice that the user could only click on labels on my system and not the checkboxes themselves).

My Javascript/Jquery skills are still very much beginning so sorry for the terrible code. Thanks for your help!

$(document).ready(function () {
    $('.negociacao').on('click', 'label', function () {

        $(this).closest('div').find('.tatica').prop("checked", true);

        if ($(this).closest('div').find('.tatica').checked = true) {
            $('.negociacao').on('click', 'label', function () {
                $(this).closest('div').find('.tatica').prop("checked", false);
            })
        }
    })
})

.negociacao label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="negociacao">
    <form method="post">
        <fieldset>
            <div>
                <input type="checkbox" class="tatica" value="ana_est">
                <label id="ana_est">Análise Estratégica</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="cat_com">
                <label id="cat_com">Catálogo de Compras</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="com_cen">
                <label id="com_cen">Compras Centralizadas</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="com_spo">
                <label id="com_spo">Compras Spot</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="con_cur">
                <label id="con_cur">Contrato Curto Prazo</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="ges_con">
                <label id="ges_con">Gestão de Contratos</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="ges_ris">
                <label id="ges_ris">Gestão de Risco de Fortalecimento</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="pad_esp">
                <label id="pad_esp">Padronização das Especificações</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="sou_ppu">
                <label id="sou_ppu">S. Sourcing - PPU</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="sou_tca">
                <label id="sou_tca">S. Sourcing - TCA</label>
                <br>
            </div>
        </fieldset>
    </form>
</div>

Answer 1

You have an assignment = when you meant to compare with ==:

if ($(this).closest('div').find('.tatica').checked = true

should be

if ($(this).closest('div').find('.tatica').checked == true)

or just

if ($(this).closest('div').find('.tatica').checked)

However the code as written will then always be true as you just set it on the previous line.

The next problem is nesting click handlers. You just do not do that.

The whole problem can be simplified to the following:

$(document).ready(function () {
    $('.negociacao').on('click', 'label', function () {
        // Find the associated checkbox 
        var $check = $(this).closest('div').find('.tatica');
        // Toggle the checked on/off
        $check.prop("checked", !$check.prop("checked"));
    })
})