Enable input dependent on a chekbox

Navigation
3

The modal shows data that is retrieved by a query and I am filling it with a for cycle.

With several tests that I did I could get true or false which is the value of the checkbox but what does not change is the state of the input to enable or disable according to the case that is my main problem.

In this function my problem is centered with the tests that I did not manage to solve the prob.     enableDisable (option) 

<div id="modalPay" class="modal fade modal-child" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form  action="" method="post" class="form-horizontal">
                        <div class="row">
                            <div class="col-xs-5 col-sm-3">
                                <h4><strong>Nombre de cliente:</strong></h4>
                            </div>
                            <div class="col-xs-7 col-sm-9" id="clientName">
                            </div>
                            </div>
                        <hr/>
                        <div class="row">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="text-center">Fecha compra</th>
                                    <th class="text-center">Monto total</th>
                                    <th class="text-center">A cuenta</th>
                                    <th class="text-center">Saldo</th>
                                    <th class="text-center">Habilitar pago</th>
                                    <th class="text-center">Monto a pagar</th>
                                    <th class="text-center">Detalles</th>
                                </tr>
                            </thead>
                            <tbody id="myFormPay">
                            </tbody>
                        </table>
                        </div>
                        </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="button" id="btnSavePay" class="btn btn-primary">Guardar</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <script>    
                $('#modalPay').modal('show');
                $('#modalPay').find('.modal-title').text('Realizar pago');
                $('#myFormPay').attr('action', '<?php echo base_url() ?>pagov/addPay');

                $.ajax({
                    type: 'ajax',
                    method: 'post',
                    async: false,
                    url: '<?php echo base_url() ?>pagov/makePay',
                    data: {id: id},
                    dataType: 'json',
                    success: function (data) {

                        var html = '';
                        var html1 = ''; 
                        html1 += '<h4><strong>'+data[0].ven_cliente+'</strong></h4>';
                                $('#clientName').html(html1);
                        var i;
                        for(i=0;i<data.length;i++){

                            html += '<tr>'+
                                            '<td class="col-sm-1 col-md-1 text-center"><strong>'+data[i].ven_fecha+'</strong></td>'+
                                            '<td class="col-sm-1 col-md-1 text-center"><strong>'+data[i].ven_total+'</strong></td>'+
                                            '<td class="col-sm-1 col-md-1 text-center"><strong>'+data[i].pv_monto+'</strong></td>'+
                                            '<td class="col-sm-1 col-md-1 text-center"><strong>'+(data[i].ven_total - data[i].pv_monto)+'</strong></td>'+
                                            '<td class="col-sm-1 col-md-1 text-center">'+
                                            '<input type="checkbox" id="checkedItem'+i+'" onchange="enableDisable(this.id)">'+
                                            '</td>'+
                                            '<td class="col-sm-1 col-md-1" align="center">'+
                                            '<input id="payItem'+i+'" type="number" class="form-control" min="0" max="100000"  style="width:85px" maxlength="6" disabled="disabled">'+
                                            '</td>'+
                                            '<td class="col-sm-1 col-md-1" align="center">'+
                                               '<a href="javascript:;" class="btn btn-default glyphicon glyphicon-list vent-detail" data="' + data[i].ven_id + '"data-toggle="tooltip" data-placement="right" title="Detalle de venta"/>' +
                                               '<a href="javascript:;" class="btn btn-danger glyphicon glyphicon-list-alt item-pay" data="' + data[i].ven_id + '"data-toggle="tooltip" data-placement="right" title="Historial de pagos"/>' +
                                            '</td>' +
                                    '</tr>' ;
                                    }
                                $('#myFormPay').html(html);
                                }
                            });
                        });
function enableDisable(option){
          //en esta  
           var chk = document.getElementById(option).value;
           //var chk  = option.
           if(chk === 'on'){
            $('#payItem0').attr('disabled',!this.checked);
           alert(chk);
            }
        }     
    </script>
    
asked by M.Antonio 15.08.2017 в 20:44
source

2 answers

2

Your error is that you have to check the status of the checkbox using the property checked since it will return true or false depending on whether the checkbox is active or not. The checkbox, having no value, will always return the default value, which in this case is "on" so it will always get you into the condition.

Also, instead of passing the id to call the function you could only pass the reserved word this that will refer to the checkbox that you are pressing, not having to go back to get the same checkbox with the property getElementById .

How do you want the element corresponding to your checkbox to be enabled, then you could pass as a parameter the index of said checkbox to then apply the corresponding style to each input according to the index you have. 

onchange="enableDisable(this," + i + ")"

Finally, as you said @CesarRomero, you would not need the if since you are going to enable or disable your input based on the value of checkbox .

You should modify your function a bit: 

function enableDisable(option,i){
    var chk = option.checked;

    $('#payItem' + i).prop('disabled',!chk);
}
    
answered by 15.08.2017 / 21:15
source
0

It is because when loading the table you are not warned when it must be checked, try this in the line of the table js 

'<input type="checkbox" id="checkedItem'+i+' onchange="enableDisable(this.id)"  ' + data[i].HabiliarPago ? "checked" : "" +'>'+

At the end of the checbox I added a ternary validation, with which you add the checked property from your data.

    
answered by 15.08.2017 в 20:50
how to go through the next arrangement? in php How to serialize / deserialize a node of type CDATA