बूटस्ट्रैप 3

Question

के साथ वाईआई 2 चेकबॉक्स समूह yii2 में checkbox group कैसे बनाएं?

है यही कारण है कि हम

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

की जरूरत है यही तो मैं

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

है क्या मैं करने की जरूरत है उस कोडडाउन को उत्पन्न करने के लिए मेरे कोड में जोड़ें?

Answer 1

बटन समूह ऑटो जेनरेट किए गए चेकबॉक्स के साथ काम नहीं करेगा क्योंकि yii2 त्रुटियों के लिए divs और help block जोड़ता है। तो आप क्या कर सकते हैं एक छिपी हुई फॉर्म बनाएं और बटन समूह को jQuery के माध्यम से कनेक्ट करें। मैंने जिस कोड की आपको आवश्यकता होगी उसे बनाया है और इसे मेरे वाईआई सेटअप में काम कर रहा है। आपको बस अपने मॉडल के नाम से <model name> को प्रतिस्थापित करने की आवश्यकता है।

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

मेरा संस्करण। मैंने मानक वाईआई रेडियोबॉक्स का उपयोग किया और टेम्पलेट को कस्टमाइज़ किया।

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