我正在使用yii2动态表格来创建具有多个,唯一或维持选项的问题。在动态表单中,我有一个组合框,可让您选择问题的类型。在选择组合的问题类型时,它将调用JavaScript函数以将输入correct-option
更改为类型复选框或单选框,或者在任何情况下都消除并隐藏输入option
,然后correct option
。当前有2个问题,第一个是correct-option
是收音机时,我可以选择多个选项,而我想要的是它只允许我选择1个选项是正确的,我不知道这样做是否可行使用radiolist
代替广播。当您选择问题类型时,segundo esque el复选框justified
会更改。
这是我的代码。
_Form
<?php
$form = ActiveForm::begin([
'id' => 'dynamic-form',
"enableAjaxValidation" => true,
]);
?>
<div class="row">
<div class="col-sm-6">
<?= $form->field($model, 'title')->textInput(['maxlength' => true])->input('title', ['placeholder' => "Title Evaluation"]) ?>
<div class="row">
<div class="col-sm-6">
<?=
$form->field($model, 'date_start')->widget(DateTimePicker::className(), [
'options' => ['placeholder' => '-- Select Date --'],
'pluginOptions' => [
'language' => 'fr',
'autoclose' => true,
'calendarWeeks' => true,
'daysOfWeekDisabled' => [0, 5],
'todayHighlight' => true,
'todayBtn' => true,
]
]);
?>
</div>
<div class="col-sm-6">
<?=
$form->field($model, 'date_end')->widget(DateTimePicker::className(), [
'options' => ['placeholder' => '-- Select Date --'],
'pluginOptions' => [
'language' => 'fr',
'autoclose' => true,
]
]);
?>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<?=
$form->field($model, "type_evaluation_id")->dropDownList(
ArrayHelper::map(EvalTipo::find()->all(), 'id', 'description'), [
'prompt' => '-- Select Type --'
]);
?>
</div>
<div class="col-sm-3">
<?=
$form->field($model, 'duration')->widget(TimePicker::className(), [
'pluginOptions' => [
'showSeconds' => true,
'showMeridian' => false,
'minuteStep' => 1,
'secondStep' => 5,
]
]);
?>
</div>
<div class="col-sm-3">
<?= $form->field($model, 'qualification')->textInput(['placeholder' => 'Qualification']) ?>
</div>
</div>
</div>
<div class="col-sm-6">
<?= $form->field($model, 'description')->textarea(['rows' => 9, 'placeholder' => 'Enter evaluation description']) ?>
</div>
</div>
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Questions Evaluation</h3>
</div>
<div class="panel-body">
<?php
DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 30, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelQuestion[0],
'formId' => 'dynamic-form',
'formFields' => [
'item',
'puntuacion',
],
]);
?>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Question</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<?php foreach ($modelQuestion as $indexQuestion => $modelQuestions): ?>
<tr class="item">
<td class="vcenter">
<table class="table table-bordered table-striped">
<td class="vcenter">1.</td>
<td class="vcenter">
<?php
// necessary for update action.
if (!$modelQuestions->isNewRecord) {
echo Html::activeHiddenInput($modelQuestions, "[{$indexQuestion}]id");
}
?>
<?= $form->field ( $modelQuestion , "[{$indexQuestion}]question" )->dropDownList (
ArrayHelper::map(QuestType::find()->all() , 'id' , 'description' ) , [
'prompt' => '-- Select Question --'
] ); ?>
<?= $form->field($modelQuestions, "[{$indexQuestion}]question")->label(false)->textInput(['maxlength' => true, 'placeholder' => 'Title question']) ?>
<?= $form->field($modelQuestions, "[{$indexQuestion}]score")->label(false)->textInput(['maxlength' => true, 'placeholder' => 'Score']) ?><?= $form->field($modelQuestions,"[{$indexQuestion}]justified ")->checkbox(array('label'=>'','labelOptions'=>array('style'=>'padding:5px;'), ))->label('You want a response justified ?');?>
</td>
</table>
</td>
<td>
<?=
$this->render('_form-opc', [
'form' => $form,
'indexQuestion' => $indexQuestion,
'modelsOpc'=>$modelsOpc[$indexQuestion],
])
?>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php DynamicFormWidget::end(); ?>
</div>
</div>
</div>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? '<span class="fa fa-plus"></span> Crear' : '<span class="fa fa-edit"></span> Modificar', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
_form-opc
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_inner',
'widgetBody' => '.container-opciones',
'widgetItem' => '.opcion-item',
'limit' => 10,
'min' => 2,
'insertButton' => '.add-opcion',
'deleteButton' => '.remove-opcion',
'model' => $modelsOpc[0],
'formId' => 'dynamic-form',
'formFields' => [
'titulo',
],
]); ?>
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<?php foreach ($modelsOpc as $indexOpc => $modelOpc): ?>
<tr class="opcion-item">
<td class="vcenter">
<?php
// necessary for update action.
if (! $modelOpc->isNewRecord) {
echo Html::activeHiddenInput($modelOpc, "[{$indexQuestion}][{$indexOpc}]id");
}
?>
<?= $form->field($modelOpc, "[{$indexQuestion}][{$indexOpc}]option")->label(false)->textInput(['maxlength' => true, 'placeholder' => 'Title option']) ?>
<?= $form->field($modelOpc, "[{$indexQuestion}][{$indexOpc}]correct-option")->checkbox(array(
'label'=>'',
'labelOptions'=>array('style'=>'padding:5px;'),
//'disabled'=>true
))
?>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
Js
$script1 = <<< JS
$(".dynamicform_wrapper").on("change","select",function(){
var id=$(this).attr("id");
var optionsInput=id.match(/^([a-zA-Z]+)\-([0-9]+)/g)[0]+'-justified';
var index = $(this).attr("id").replace(/[^0-9.]/g, "");
var index_question = index.substring(0,1);
if ($(this).val()== 3) {
$('#'+optionsInput).hide();
$("label[for='" + optionsInput + "']").hide();
$('#'+index_question).find('.opcion-item').not(':first').remove();
$('#'+index_question).find('.opcion-item:first').hide();
}else if ($(this).val()== 2){
$('#'+optionsInput).show();
$("label[for='" + optionsInput + "']").show();
jQuery(".dynamicform_inner .add-opcion").each(function(indexQuestion) {
$( "input[type=checkbox]" ).attr('type','radio').prop("checked", false).show();
});
$(".dynamicform_inner").on("afterInsert", function(e) {
$( "input[type=checkbox]" ).attr('type','radio').prop("checked", false).show();
});
$(".dynamicform_inner").on("afterDelete", function(e) {
$( "input[type=checkbox]" ).attr('type','radio').prop("checked", false).show();
});
$('#'+index_question).find('.opcion-item:first').show();
}else if ($(this).val()== 1){
$('#'+optionsInput).show();
$("label[for='" + optionsInput + "']").show();
jQuery(".dynamicform_inner .add-opcion").each(function(indexQuestion) {
$( "input[type=radio]" ).attr('type','checkbox').prop("checked", false).show();
});
$(".dynamicform_inner").on("afterInsert", function(e) {
$( "input[type=radio]" ).attr('type','checkbox').prop("checked", false).show();
});
$(".dynamicform_inner").on("afterDelete", function(e) {
$( "input[type=radio]" ).attr('type','checkbox').prop("checked", false).show();
});
$('#'+index_question).find('.opcion-item:first').show();
}else {
$('#'+optionsInput).show().prop("checked", false);
$("label[for='" + optionsInput + "']").show();
$('#'+index_question).find('.opcion-item:first').show();
}
});
JS; $ this-> registerJs($ script1);