Miglioramento checkbox (#706)

This commit is contained in:
Thomas Zilio 2020-07-30 18:39:14 +02:00
parent b1cc2102a1
commit 06348886a2
2 changed files with 49 additions and 9 deletions

View File

@ -898,7 +898,7 @@ input.small-width {
border: 2px dashed #337ab7;
border-radius: 5px;
background: white;
margin-top:10px;
margin-top: 10px;
}
.dropzone .dz-message {
@ -911,3 +911,37 @@ input.small-width {
display: block;
margin-top: 1.4rem;
}
/* Fancy checkbox: https://bootsnipp.com/snippets/M2bda */
.form-group input[type="checkbox"] {
display: none;
}
.form-group input[type="checkbox"] + .btn-group > label span {
width: 20px;
}
.form-group input[type="checkbox"] + .btn-group {
width: 100%;
display: flex;
}
.form-group input[type="checkbox"] + .btn-group label:last-child {
flex-grow: 100;
}
.form-group input[type="checkbox"] + .btn-group > label span:first-child {
display: none;
}
.form-group input[type="checkbox"] + .btn-group > label span:last-child {
display: inline-block;
}
.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
display: inline-block;
}
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
display: none;
}

View File

@ -49,13 +49,19 @@ class ChoicesHandler implements HandlerInterface
// Generazione del codice HTML
// "+ this.checked" rende il valore booleano un numero
$result = '
<div class="input-group">
<span class="input-group-addon before">
<input |attr| onchange="$(this).parent().find(\'[type=hidden]\').val( + this.checked)">
<div class="form-group">
<input type="hidden" name="|name|" value="|value|">
</span>
<input type="text" class="form-control" placeholder="|placeholder|" disabled>
</div>';
<input type="checkbox" id="|id|" value="|value|" autocomplete="off" class="hidden" |attr| onchange="$(this).parent().find(\'[type = hidden]\').val(+this.checked)"/>
<div class="btn-group">
<label for="|id|" class="btn btn-default">
<span class="fa fa-check"></span>
<span class="fa fa-close"></span>
</label>
<label for="|id|" class="btn btn-default active">
|placeholder|
</label>
</div>
</div>';
return $result;
}