1

Tengo una serie de Collapsible de Bootstrap, y quiero que el botón de + únicamente despliegue el Collapsible, que es cuando se va a insertar, no que al darle click se cierre si ya esta abierto.

El botón "Email" despliega y comprime el Collapse, eso está bien. Pero quiero que el botón + solo lo despliegue, y si está abierto no haga nada.

Mi código es el siguiente:

<div class="form-group row text-center">
        <button class="btn col-11" type="button" data-toggle="collapse"
            data-target="#cPago" aria-expanded="false" aria-controls="cPago">
            Comportamientos pago <span class="badge badge-light text-dark">{{cPago.length}}</span>
        </button>
        <i class="fas fa-plus text-success col-1" data-toggle="collapse"
            data-target="#cPago" (click)="cPago.push('')" [hidden]="btnStatus"></i>
    </div>
    <div class="collapse col-11" id="cPago">
        <div class="card card-body block-center">
            <table class="table">
                <tr *ngFor="let c of cPago, let i = index trackBy:trackByFn">
                    <td class="col-10"><input type="number" class="form-control"
                        [(ngModel)]="cPago[i]" [disabled]="inputStatus" required
                        maxlength="3" name="in3"></td>
                    <td class="col-1"><i class="far fa-trash-alt text-danger"
                        (click)="cPago.splice(i,1)" [hidden]="btnStatus"></i></td>
                </tr>
            </table>
        </div>
    </div>

1 respuesta 1

1

Vas a tener que usar jQuery y el evento shown.bs.collapse de boostrap. Te dejo un ejemplo.

$('.collapse').on('shown.bs.collapse', function (e) {
  $('.btn.col-11').prop("disabled",true);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="form-group row text-center">
        <button class="btn col-11" type="button" data-toggle="collapse"
            data-target="#cPago" aria-expanded="false" aria-controls="cPago">
            Comportamientos pago <span class="badge badge-light text-dark">{{cPago.length}}</span>
        </button>
        <i class="fas fa-plus text-success col-1" data-toggle="collapse"
            data-target="#cPago" (click)="cPago.push('')" [hidden]="btnStatus"></i>
    </div>
    <div class="collapse col-11" id="cPago">
        <div class="card card-body block-center">
            <table class="table">
                <tr *ngFor="let c of cPago, let i = index trackBy:trackByFn">
                    <td class="col-10"><input type="number" class="form-control"
                        [(ngModel)]="cPago[i]" [disabled]="inputStatus" required
                        maxlength="3" name="in3"></td>
                    <td class="col-1"><i class="far fa-trash-alt text-danger"
                        (click)="cPago.splice(i,1)" [hidden]="btnStatus"></i></td>
                </tr>
            </table>
        </div>
    </div>

4

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.