Yii2 önyükleme paketi ile onay kutusu grubu 3

Question

Yii2'de checkbox group nasıl oluşturulur? Biz Ben gerekenler

<? 
    $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), 
     ], 
    ]); 
?> 

ne var O

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

gerekenler

Bu işaretlemeyi oluşturmak için koduma ekle?

Answer 1

Düğme grubu otomatik oluşturulan onay kutularıyla çalışmaz çünkü yii2, div ve hatalar için yardım bloğunu ekler. Yani yapabileceğiniz şey gizli bir form oluşturmak ve düğme grubunu jQuery aracılığıyla bağlamaktır. İhtiyacınız olan kodu yarattım ve yii kurulumumda çalıştım. Tek yapmanız gereken, modelinizin adıyla <model name>'un yerini almaktır.

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

Varsayım. Standart yii radyo kutusunu kullandım ve şablonu özelleştirdim.

<?= $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