Hide checkbox and display other

Question

I did a little validation in my script only that I am not able to do the following validation.

I have 2 checkbox, each execulta an action, as you can see in my if down below.

@if (item.Cadeado == 1 && item.cadeadoAH == 1) {
  <input type="checkbox" name="check_LiberarFormulario" data-form="AltaUti" data-value="@item.PatientId" data-content="@item.PatientId" checked style="height: 14px;">
} else {
  <input type="checkbox" name="check_BloquearFormulario" data-form="AltaUtiDesc" data-value="@item.PatientId" data-content="@item.PatientId" style="height: 14px;">
}

Below are the two scripts of these two checkbox

   $('[name="check_LiberarFormulario"]').click(function (element) {
        var $btn = $('#' + element.id);
        var id = $(this).attr('data-value');
        var formulario = $(this).attr('data-form');

        $.ajax({
            method: 'POST',
            url: '/Formulario/Cadastro/AbrirCadeadoForm',
            data: { 'id': id, 'formulario': formulario },
            success: function (response) {
                notif({
                    'type': 'danger',
                    'msg': '<b>Formulário Liberado!</b> Sua página será atualizada em alguns segundos',
                    'position': 'center',
                    'multiline': true,
                    'timeout': 2000
                })
            },
            error: function (response) {
                $('.resultadoSalvar.modal').modal('show');
                $('#tituloSalvo45').text('Ocorreu um erro');
                $('#mensagemResultadoSalvar').text('Ocorreu um erro inesperado, entre em contato com o suporte!');
            }
        });
    });

    $('[name="check_BloquearFormulario"]').click(function (element) {
        var $btn = $('#' + element.id);
        var id = $(this).attr('data-value');
        var formulario = $(this).attr('data-form');

        $.ajax({
            method: 'POST',
            url: '/Formulario/Cadastro/AbrirCadeadoForm',
            data: { 'id': id, 'formulario': formulario },
            success: function (response) {
                notif({
                    'type': 'success',
                    'msg': '<b>Formulário Bloqueado!</b>',
                    'position': 'center',
                    'autohide': true,
                    'multiline': true,
                    'timeout': 2000
                })
            },
            error: function (response) {
                $('.resultadoSalvar.modal').modal('show');
                $('#tituloSalvo45').text('Ocorreu um erro');
                $('#mensagemResultadoSalvar').text('Ocorreu um erro inesperado, entre em contato com o suporte!');
            }
        });
    });

When the check_LiberarFormulario the check is removed check_BloquearFormulario should be displayed, vice versa, ie click on one and display the other, and when loading the page can only appear one option.

I tried to do with show() and Hide() fadein() and Fadeout() only that I was unsuccessful in any of these options.

Answer 1

Have you tried using the method toggle jQuery? See more here

$( "button" ).click(function() {
  $( "p" ).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

Answer 2

You can do it using jquery:

var check1 = $("#id-do-check-1");
var check2 = $("#id-do-check-2");

check1.on("change", function () {
        if (check1.find("input:checked").length) {
            check2.show();
        }
        else {
            check2.hide();
        }
    }
);

See the full example: https://jsfiddle.net/0k807jjt/10/