Checkbox with jQuery Enable and Disable field

Navigation
1

I have the following structure: 

<tr>
    <td>Modalidade</td>
    <td><input type="checkbox" name="check_adulto" id="check_adulto"> Adulto(s) <?php echo $detalhes->ati_faixa_adulto_inicio; ?> - ∞</td>
    <td><input type="checkbox" name="check_crianca"> Criança(s) <?php echo $detalhes->ati_faixa_crianca_inicio; ?> - <?php echo $detalhes->ati_faixa_crianca_final; ?></td>
    <td><input type="checkbox" name="check_infante"> Infante(s) <?php echo $detalhes->ati_faixa_infantes_inicio; ?> - <?php echo $detalhes->ati_faixa_infantes_final; ?></td>
</tr>
<?php foreach($modalidades as $valor){ ?>
<tr>
    <td width="30%"><?php echo $valor->titulo; ?></td>
    <td>
        <div class="input-group" style="width: 40%">
            <span class="input-group-addon">BRL</span>
            <input type="text" class="form-control adulto" disabled="disabled">
        </div>
    </td>
    <td>
        <div class="input-group" style="width: 40%">
            <span class="input-group-addon">BRL</span>
            <input type="text" class="form-control" disabled="disabled">
        </div>
    </td>
    <td>
        <div class="input-group" style="width: 40%">
            <span class="input-group-addon">BRL</span>
            <input type="text" class="form-control" disabled="disabled">
        </div>
    </td>
</tr>

And the following jQuery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$("#check_adulto").click(function(){
        $(".adulto").prop("disabled", false);

        $("#check_adulto").last().click(function(){
            $(".adulto").prop("disabled", true);
        });     
    });
</script>

However, when you click enable or disable ... does not work, it enables, but does not disable. How can I resolve?

    
asked by anonymous 15.02.2018 / 19:23

2 answers

2

Pretty simple way to do this: 

$("#check_adulto").click(function(){
   var adulto = $(".adulto");
   adulto.prop("disabled", !adulto.prop("disabled"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tr><td>Modalidade</td><td><inputtype="checkbox" name="check_adulto" id="check_adulto"> Adulto(s) <?php echo $detalhes->ati_faixa_adulto_inicio; ?> - ∞</td>
    <td><input type="checkbox" name="check_crianca"> Criança(s) <?php echo $detalhes->ati_faixa_crianca_inicio; ?> - <?php echo $detalhes->ati_faixa_crianca_final; ?></td>
    <td><input type="checkbox" name="check_infante"> Infante(s) <?php echo $detalhes->ati_faixa_infantes_inicio; ?> - <?php echo $detalhes->ati_faixa_infantes_final; ?></td>
</tr>
<?php foreach($modalidades as $valor){ ?>
<tr>
    <td width="30%"><?php echo $valor->titulo; ?></td>
    <td>
        <div class="input-group" style="width: 40%">
            <span class="input-group-addon">BRL</span>
            <input type="text" class="form-control adulto" disabled="disabled">
        </div>
    </td>
    <td>
        <div class="input-group" style="width: 40%">
            <span class="input-group-addon">BRL</span>
            <input type="text" class="form-control" disabled="disabled">
        </div>
    </td>
    <td>
        <div class="input-group" style="width: 40%">
            <span class="input-group-addon">BRL</span>
            <input type="text" class="form-control" disabled="disabled">
        </div>
    </td>
</tr>
    
15.02.2018 / 19:42
1

Does this help you? 

$("#check_adulto").on("click", function (){
    var isDisabled = $(".adulto").is(':disabled');
    if (isDisabled) {
        $(".adulto").prop('disabled', false);
    } else {
        $(".adulto").prop('disabled', true);
    }
});

Strong embrace.

    
15.02.2018 / 19:39
Validating form field How should I work on Bootstrap and JavaScript links?