Gruppo di caselle Yii2 con bootstrap 3

Question

Come creare checkbox group in yii2?

Questo è quello che ci serve

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> Checkbox 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> Checkbox 3 
    </label> 
</div> 

Questo è quello che ho

<? 
    $options = ['uncheck'=>0]; 

    echo ButtonGroup::widget([ 
     'options' => [ 
      'data-toggle' => 'buttons' 
     ], 
     'buttons' => [ 
      $form->field($model, 'field1')->checkbox($options), 
      $form->field($model, 'field2')->checkbox($options), 
      $form->field($model, 'field3')->checkbox($options), 
     ], 
    ]); 
?> 

Che cosa devo aggiungi il mio codice per generare quel markdown?

Answer 1

Il gruppo di pulsanti non funzionerà con le caselle di controllo generate automaticamente perché yii2 aggiunge div e il blocco di guida per gli errori. Quindi, ciò che puoi fare è creare un modulo nascosto e connetterlo al gruppo di pulsanti tramite jQuery. Ho creato il codice di cui avresti avuto bisogno e ho funzionato nel mio setup di yii. Tutto quello che devi fare è sostituire <model name> con il nome del tuo modello.

<?php 
use yii\bootstrap\ButtonGroup; 
use yii\bootstrap\ActiveForm; 
use yii\web\View; 
?> 

<?= 
    ButtonGroup::widget([ 
     'buttons' => [ 
      ['label' => 'Checkbox 1', 'options'=>['class'=>'btn btn-primary', 'id'=>'button1', 'autocomplete'=>'off', 'aria-pressed'=>'false']], 
      ['label' => 'Checkbox 2', 'options'=>['class'=>'btn btn-primary', 'id'=>'button2', 'autocomplete'=>'off', 'aria-pressed'=>'false']], 
      ['label' => 'Checkbox 3', 'options'=>['class'=>'btn btn-primary', 'id'=>'button3', 'autocomplete'=>'off', 'aria-pressed'=>'false']], 
     ] 
    ]); 
?> 

<?php $form = ActiveForm::begin(); ?> 

<?= $form->field($model, 'field1')->hiddenInput()->label(false) ?> 
<?= $form->field($model, 'field2')->hiddenInput()->label(false) ?> 
<?= $form->field($model, 'field3')->hiddenInput()->label(false) ?> 

<?php ActiveForm::end();?> 

<?php 
$script = <<< JS 

if($('#<model name>-field1').val()=='1'){ 
    $('#button1').addClass('active'); 
    $('#button1').attr('aria-pressed', 'true'); 
} 

if($('#<model name>-field2').val()=='1'){ 
    $('#button2').addClass('active'); 
    $('#button2').attr('aria-pressed', 'true'); 
} 

if($('#<model name>-field3').val()=='1'){ 
    $('#button3').addClass('active'); 
    $('#button3').attr('aria-pressed', 'true'); 
} 

$('.btn').on('click', function() { 
    $(this).button('toggle') 
    $(this).blur(); 
}); 

$('#button1').on('click', function() { 
    if($('#button1').attr('aria-pressed')== 'true'){ 
     $('#<model name>-field1').val('1') 
    } else { 
     $('#<model name>-field1').val('0') 
    } 
}); 

$('#button2').on('click', function() { 
    if($('#button2').attr('aria-pressed')== 'true'){ 
     $('#<model name>-field2').val('1') 
    } else { 
     $('#<model name>-field2').val('0') 
    } 
}); 

$('#button3').on('click', function() { 
    if($('#button3').attr('aria-pressed')== 'true'){ 
     $('#<model name>-field3').val('1') 
    } else { 
     $('#<model name>-field3').val('0') 
    } 
}); 

JS; 
$this->registerJs($script, View::POS_END); 
?> 

Answer 2

La mia variante. Ho usato radiobox yii standard e personalizzato template.

<?= $form->field($model, 'attribute')->radioList(
[ 
     1 => 'Enabled', 
     2 => 'Disabled' 
    ], 
    [ 
     'item' => function ($index, $label, $name, $checked, $value) { 
      if ($value==1) 
       $class_btn = 'btn-success'; // Style for enable 
      else 
       $class_btn = 'btn-default'; // Style for disable 

      if ($checked) 
       $class_btn = $class_btn.' active'; // Style for checked button 
      return 
       '<label class="btn '. $class_btn.'">' . Html::radio($name, $checked, ['value' => $value]) . $label . '</label>'; 
     }, 
     'class' => 'btn-group', "data-toggle"=>"buttons", // Bootstrap class for Button Group 
    ] 
)->label('Some label'); 
?> 

My result