如果选择了一个下拉菜单，则修改视图，禁用其他下拉菜单

Question

我有一个表单，我正在为用户分配一些设备。我只想给一个用户分配一台设备，因为我有开始日期和结束日期。我想如果我从下拉列表中选择一些显示，手机和笔记本电脑将冻结并被选择默认无。我还想如果我选择手机为ex，显示器和笔记本电脑冻结。我在某个地方找到了可以用javascript制作的东西，但我不知道怎么做如果你能指导我或给我一个恰当的例子，我将不胜感激。我是js的新手

这是我的表格：

<?php
use yiihelpersHtml;
use yiiwidgetsActiveForm;
use yiihelpersArrayHelper;
use appmodelsUser;
use kartikdateDatePicker;
/* @var $this yiiwebView */
/* @var $model appmodelsUserEquipmentMapping */
/* @var $form yiiwidgetsActiveForm */
#print_r($userquery);die;
?>
<div class="user-equipment-mapping-form">
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'user_id')
->dropDownList(ArrayHelper::map($usermodel, 'id', 'username'))?>

<?= $form->field($model, 'laptop_id')
->dropDownList(ArrayHelper::map($laptopmodel, 'id', 'laptop_series'))?>

<?= $form->field($model, 'phone_id')
->dropDownList(ArrayHelper::map($phonemodel, 'id', 'phone_series'))?>

<?= $form->field($model, 'display_id')
->dropDownList(ArrayHelper::map($displaymodel, 'id', 'display_series'))?>

<?=$form->field($model, 'start_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>
<?=$form->field($model, 'stop_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>

<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>

感谢您的任何建议

更新：但仍然不起作用，我已经尝试了至少前两个下降测试。

<?php
use yiihelpersHtml;
use yiiwidgetsActiveForm;
use yiihelpersArrayHelper;
use appmodelsUser;
use kartikdateDatePicker;
/* @var $this yiiwebView */
/* @var $model appmodelsUserEquipmentMapping */
/* @var $form yiiwidgetsActiveForm */
#print_r($userquery);die;
?>



<div class="user-equipment-mapping-form">
<script>
$(document).ready(function(){
if($("#dropDown1").val())
$("#dropDown2").attr("disabled", "disabled");
else
$("#dropDown2").removeAttr("disabled");
if($("#dropDown2").val())
$("#dropDown1").attr("disabled", "disabled");
else
$("#dropDown1").removeAttr("disabled");
$($("#dropDown1").on("change", function(){
if($(this).val())
$("#dropDown2").attr("disabled", "disabled");  
else
$("#dropDown2").removeAttr("disabled");
});
$($("#dropDown2").on("change", function(){
if($(this).val())
$("#dropDown1").attr("disabled", "disabled");  
else
$("#dropDown1").removeAttr("disabled");
});
});
</script>

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


<?php 
$userData=ArrayHelper::map($usermodel,'id','username');
echo $form->field($model, 'user_id')->dropDownList($userData, ['prompt'=>'Select...'], array("id" => 'dropDown1'));
?>



<?php 
$laptopData=ArrayHelper::map($laptopmodel,'id','laptop_series');
echo $form->field($model, 'laptop_id')->dropDownList($laptopData, ['prompt'=>'Select...'], array("id" => 'dropDown2'));
?>  
<?php 
$phoneData=ArrayHelper::map($phonemodel,'id','phone_series');
echo $form->field($model, 'phone_id')->dropDownList(
$phoneData, 
['prompt'=>'Select...']);
?>

<?php 
$displayData=ArrayHelper::map($displaymodel,'id','display_series');
echo $form->field($model, 'display_id')->dropDownList(
$displayData, 
['prompt'=>'Select...']);
?>

<?=$form->field($model, 'start_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>
<?=$form->field($model, 'stop_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>

<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>

Answer 1

您的下拉菜单-添加onchange函数和类equipment

<?= $form->field($model, 'laptop_id')->dropDownList(ArrayHelper::map($laptopmodel, 'id', 'laptop_series'), ['prompt'=>'Select...', 'onchange' => 'setEquipment(this)', 'class' => 'equipment'])?>
<?= $form->field($model, 'phone_id')->dropDownList(ArrayHelper::map($phonemodel, 'id', 'phone_series'), ['prompt'=>'Select...', 'onchange' => 'setEquipment(this)', 'class' => 'equipment'])?>

<?= $form->field($model, 'display_id')->dropDownList(ArrayHelper::map($displaymodel, 'id', 'display_series'), ['prompt'=>'Select...', 'onchange' => 'setEquipment(this)', 'class' => 'equipment'])?>

js

function setEquipment(el){
var equipment_elements = $('.equipment');
if($(el).val() != "") {
$.each(equipment_elements, function (key, value) { //disable all elements
$(this).attr('disabled', true);
});
$(el).attr('disabled', false); //enable current element
}else{
$.each(equipment_elements, function (key, value) { //enable all elements
$(this).attr('disabled', false);
});
}
}