Checkbox with jQuery Enable and Disable field

Asked

Viewed 1,993 times

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 next 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 clicking on enable or disable... does not work, it enables, but does not disable. How can I fix?

jquery

2 answers

2


Very 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><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>

1

Does it help you ?

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

Hug.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.