Enable / Disable Checkboxes by clicking on another different checkbox using jQuery

Question

Enable / Disable Checkboxes by clicking on another different checkbox using jQuery

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I am developing a form that contains a checkbox list, which belong to the class .causa , likewise there is a checkbox of the class .without_cause which I intend that disables the checkboxes mentioned initially. Searching the Internet I found the following example, which only allows you to disable checkboxes no matter which class you click:

$('input[type=checkbox]').on('change', function() {
    if ($(".sin_causa").is(':checked') ) {
        $( ".causa" ).prop( "disabled", false );
        alert('Unchecked');
    } else {
        $( ".causa" ).prop( "disabled", true );
        alert('Checked');
    }
});

<tr>
  <th rowspan="1">Propuesta Económica</th>
  <td>Los precios de sus productos son elevados</td>
  <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="22" id="causas[]" name="causas[]"></td>
</tr>
<tr>
  <th rowspan="2">Personal</th>
  <td>El particular autorizado/concesionado no se encuentra en el Establecimiento de Consumo Escolar.</td>
  <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="23" id="causas[]" name="causas[]"></td>
</tr>
<tr>
  <td>El personal que labora en el Establecimeinto tiene actitudes negativas y presta sus servicios de mal forma. </td>
  <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="24" id="causas[]" name="causas[]"></td>
</tr>

<label><strong>*En caso de no resultar problemática alguna, de click en la siguiente casilla.</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="form-check-input" type="checkbox" value="25" id="sin_causa[]" name="sin_causa[]"></label>

I would greatly appreciate your help, as well as guidance that you could give me ...

javascript jquery html checkbox

asked by Richard Cruz Ambrosio 25.04.2018 в 22:58

source

3 answers

0

You would have several methodologies, you can use the classes, or in turn the id, I will give you an example where I use the ID

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chk_1" checked><label>Checkbox 1</label>
<input type="checkbox" id="chk_2" checked><label>Checkbox 2</label>
<br><br>
<input type="checkbox" id="chk_3" onclick="miFuncion(event);"><label>Marcar/Desmarcar</label>
<script>
function miFuncion(event){
if ($('#chk_1').is(":checked")){
//quitamos los seleccionados
$('#chk_1').attr('checked', false);
$('#chk_2').attr('checked', false);
}else{
//seleccionamos
$('#chk_1').attr('checked', true);
$('#chk_2').attr('checked', true);
}
}//end function 
</script>

Example done !!

answered by 25.04.2018 в 23:15

0

You almost have it, you only need to add the onchange event to the checkbox with the id "sin_causa[]" to activate or deactivate the other checkboxes with the class "causa"

Based on your code, here is an example of how to do it:

$('#sin_causa').on('change', function() {
        $( ".causa" ).prop( "disabled", $(this).is(':checked'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <th rowspan="1">Propuesta Económica</th>
  <td>Los precios de sus productos son elevados</td>
  <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="22" id="causas[]" name="causas[]"></td>
</tr>
<tr>
  <th rowspan="2">Personal</th>
  <td>El particular autorizado/concesionado no se encuentra en el Establecimiento de Consumo Escolar.</td>
  <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="23" id="causas[]" name="causas[]"></td>
</tr>
<tr>
  <td>El personal que labora en el Establecimeinto tiene actitudes negativas y presta sus servicios de mal forma. </td>
  <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="24" id="causas[]" name="causas[]"></td>
</tr>

<label><strong>*En caso de no resultar problemática alguna, de click en la siguiente casilla.</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="form-check-input" type="checkbox" value="25" id="sin_causa" name="sin_causa"></label>

Just one last tip, do not use special characters in the names or id like for example the brackets [].

I hope this helps you. ;)) ...

answered by 26.04.2018 в 04:32

Extract weights / weights in ACP / PCA psych :: main Python freezes in a While Loop

score 1 · Accepted Answer

As I think I understand in the question, the effect you are looking for is rather:

        $('#sin_causa').on('change', function() {
             if ($(this).is(':checked') ) {
                $( ".causa" ).prop( "disabled", true );
             } else {
                $( ".causa" ).prop( "disabled", false );
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <tr>
            <th rowspan="1">Propuesta Económica</th>
            <td>Los precios de sus productos son elevados</td>
            <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="22" id="causas[]" name="causas[]"></td>
        </tr>
        <tr>
            <th rowspan="2">Personal</th>
            <td>El particular autorizado/concesionado no se encuentra en el Establecimiento de Consumo Escolar.</td>
            <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="23" id="causas[]" name="causas[]"></td>
        </tr>
        <tr>
            <td>El personal que labora en el Establecimeinto tiene actitudes negativas y presta sus servicios de mal forma. </td>
            <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input class="form-check-input causa" type="checkbox" value="24" id="causas[]" name="causas[]"></td>
        </tr>
        <label><strong>*En caso de no resultar problemática alguna, de click en la siguiente casilla.</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="form-check-input" type="checkbox" value="25" id="sin_causa" name="sin_causa"></label>
    </table>