Yii2 kartik switchinput 在一個視圖中多個表單不起作用

Question

首先感謝您的關注。 我正在嘗試在一個視圖中處理多個表單，但對此沒有運氣。

查看.php

use kartik\form\ActiveForm;
use kartik\widgets\SwitchInput;

$this->title = Yii::t('app', 'Links');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="link-index">
    <div class="row">
        <?php foreach ($links as $link):?>
            <div class="col-md-2">
                <?php
                $form = ActiveForm::begin([
                    'id' => $link->_id,
                    'type' => ActiveForm::TYPE_VERTICAL
                ]); ?>
                <?= $form->field($link, 'url') ?>
                <?= $form->field($link, 'active')->widget(SwitchInput::classname(), [
                    'pluginOptions' => [
                        'size' => 'medium',
                        'onColor' => 'success',
                        'offColor' => 'danger',
                    ],
                    'pluginEvents'=>[
                        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
                    ]]); ?>

                <?php ActiveForm::end(); ?>
            </div>
        <?php endforeach; ?>
    </div>
</div>

這是結果：

和控制台輸出（沒有錯誤）

我認為我選擇了正確的方式來為我的所有模型對象渲染表單？ 嗯？

Answer 1

編輯

根據我們的討論，OP 並沒有嘗試在同一個字段上初始化，而是有多個具有相同字段名稱的模型，並且您正在使用foreach顯示它們，所以我建議做的是，

1. 在你的foreach使用對沒有模型的小部件的靜態調用
2. 引入一個$counter字段並在循環中使用它來命名輸入字段。
3. 在不使用 ActiveForm 的情況下顯示switchInput ，並且應將原始active狀態字段添加為form內的隱藏字段。
4. 然后使用switchChange.bootstrapSwitch事件保持hidden字段的值與switchInput字段同步。

通過這種方式，您不必擔心在提交表單並驗證然后將數據保存到數據庫表時手動將值加載到模型字段，但是當您必須編輯時可能需要手動加載該字段，只需使用switchInput的value選項加​​載相應的模型字段值。

如果現在不使用，您可能已經在foreach循環中使用某些東西作為計數器。 如果這對您有幫助，請參見下文。我將添加一個簡單的$counter來向您展示我在說什么，您可以根據自己的需要進行修改。

這是示例代碼，以便您了解我的建議

//the counter 
$counter = 1;

//the foreach loop
foreach(...){
//your form 
$form = ActiveForm::begin(['id' => 'form_' . $counter]);

//call the switchInput without activeform or model
echo SwitchInput::widget([
    'name' => 'fake_status_' . $counter,
    'pluginOptions' => [
        'onColor' => 'success',
        'offColor' => 'danger',
    ], 'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { 
             if($(item.currentTarget).is(':checked')){ 
                 $('#status_" . $counter . "').val(1)
             }else{ 
                 $('#status_" . $counter . "').val(0)} 
         }"
    ]
]);

//the original status field
$form->field($model, 'status', ['inputOptions' => ['id' => 'status_' . $counter]])->hiddenInput();

ActiveForm::end();
$counter++;
}

---

您不能使用具有相同input或model field多個開關，這就是您遇到此問題的原因，因為switchInput通過分配id來初始化腳本，並且您嘗試在同一字段名稱 3 不同時間對其進行初始化，不能有具有相同id多個元素，因此javascript/jquery本質上會在匹配的第一個元素上初始化插件，嘗試在沒有不同names model進行初始化。

echo SwitchInput::widget([
    'name' => 'status',
    'pluginOptions' => [

        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ],'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
]
]);


echo SwitchInput::widget([
    'name' => 'status2',
    'pluginOptions' => [

        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ],'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
]
]);    

或者在模型中使用不同的名稱聲明自定義字段，例如$status ， $status2 ，然后使用它們來初始化model 。

echo $form->field ( $model , 'status' )->widget ( SwitchInput::classname () , [
    'pluginOptions' => [
        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ] ,
    'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
] ] );
echo $form->field ( $model , 'status2' )->widget ( SwitchInput::classname () , [
    'pluginOptions' => [
        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ] ,
    'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
] ] );

Answer 2

實際上，您不能僅使用一個模型屬性創建此小部件的多個實例。

示例：1) 不起作用：

<?= $form->field($link, 'active')->widget(SwitchInput::classname()
<?= $form->field($link, 'active')->widget(SwitchInput::classname()

2）如果你想讓它工作，你需要與模型不同的獨特屬性：

<?= $form->field($link, 'active0')->widget(SwitchInput::classname()
<?= $form->field($link, 'active1')->widget(SwitchInput::classname()

但至於為每個獨特的字段生成獨特的模型屬性 - 這根本不是什么交易 - 通過無模型版本的 kartik 小部件更好地解決這一刻：

echo '<label class="control-label">Status</label>';
echo SwitchInput::widget(['name'=>'status_1', 'value'=>true]);
echo '<label class="control-label">Status</label>';
echo SwitchInput::widget(['name'=>'status_2', 'value'=>true]);

來自kartik switchinput小部件頁面的答案來源，希望，如果不是問題的作者，它會有所幫助，但下一個會找到這個問題的人（如我所見，當我搜索此問題的解決方案時）