我正在创建一个应用程序，员工可以在该应用程序中选择它们存在的日期以及它们不存在的日期。如果他们在场;什么时候。我使用kendo ui和kendoTimePicker()来选择时间。
我正在开发一个功能，如果在editorFor中选择了缺席，则会禁用相应的timePicker。假设用户没有在星期五工作，则用户在菜单中选择缺席，jQuery脚本会禁用startVr和endVr timePickers。
目前（对我的脚本有所影响）你选择哪个editorFor“缺席”并不重要; <{1}}和startMa timePickers已停用。
现在问我的问题：
如何让脚本知道最终用户将星期一endMa设置为缺席而不是其中一个？
这就是我现在所拥有的：
jQuery的：
editorFor我的观点（只是周一$('#startMa, #startDi, #startWo, #startDo, #startVr, #startZa, #startZo').kendoTimePicker({
format: "HH:mm",
min: "8:00",
max: "17:30",
value: "8:30",
interval: 15
});
$('#endMa, #endDi, #endWo, #endDo, #endVr, #endZa, #endZo').kendoTimePicker({
format: "HH:mm",
min: "8:00",
max: "17:30",
value: "17:00",
interval: 15
});
$('#maandag, #dinsdag, #woensdag, #donderdag, #vrijdag, #zaterdag, #zondag').change(function () {
var maStartTimePicker = $('#startMa').data("kendoTimePicker");
var maEndTimePicker = $('#endMa').data("kendoTimePicker");
var diStartTimePicker = $('#startDi').data("kendoTimePicker");
var diEndTimePicker = $('#endDi').data("kendoTimePicker");
var woStartTimePicker = $('#startWo').data("kendoTimePicker");
var woEndTimePicker = $('#endWo').data("kendoTimePicker");
var doStartTimePicker = $('#startDo').data("kendoTimePicker");
var doEndTimePicker = $('#endDo').data("kendoTimePicker");
var vrStartTimePicker = $('#startVr').data("kendoTimePicker");
var vrEndTimePicker = $('#endVr').data("kendoTimePicker");
var zaStartTimePicker = $('#startZa').data("kendoTimePicker");
var zaEndTimePicker = $('#endZa').data("kendoTimePicker");
var zoStartTimePicker = $('#startZo').data("kendoTimePicker");
var zoEndTimePicker = $('#endZo').data("kendoTimePicker");
if (this.value == "false" || this.value == "afwezig") {
maStartTimePicker.enable(false);
maEndTimePicker.enable(false);
} else{
maStartTimePicker.enable(true);
maEndTimePicker.enable(true);
}
});
和editorFor来保持简短）：
timePicker我尝试发送一个发送 <div class="form-group">
@Html.LabelFor(model => model.maandag, htmlAttributes: new { @class = "control-label col-md-5" })
<div class="col-md-4">
@Html.EditorFor(model => model.maandag, new { htmlAttributes = new { @class = "form-control", id = "maandag"} })
@Html.ValidationMessageFor(model => model.maandag, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-5"><b>van</b></p>
<div class="col-md-4">
<input id="startMa" class="form-control" style="width:280px;"/>
@Html.ValidationMessageFor(model => model.ma_van, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-5"><b>tot</b></p>
<div class="col-md-4">
<input id="endMa" class="form-control" style="width:280px;" />
@Html.ValidationMessageFor(model => model.ma_tot, "", new { @class = "text-danger" })
</div>
</div>
的{{1}}但由于某种原因我的onchange function无法识别。现在我不知道从哪里开始。
我想将它全部保存在1个函数中，因为我希望尽可能将代码保存为 DRY 。
答案 0 :(得分：0)
我想通了，我在al。之后走在了正确的轨道上。我向每个EditorFor添加了onchange="schakelAanUit(this)"并对该函数进行了一些更改。
脚本：
function schakelAanUit(a) {
var selected = a.id;
console.log(selected);
//maak een variabel van de timepicker
var maStartTimePicker = $('#startMa').data("kendoTimePicker");
var maEndTimePicker = $('#endMa').data("kendoTimePicker");
var diStartTimePicker = $('#startDi').data("kendoTimePicker");
var diEndTimePicker = $('#endDi').data("kendoTimePicker");
var woStartTimePicker = $('#startWo').data("kendoTimePicker");
var woEndTimePicker = $('#endWo').data("kendoTimePicker");
var doStartTimePicker = $('#startDo').data("kendoTimePicker");
var doEndTimePicker = $('#endDo').data("kendoTimePicker");
var vrStartTimePicker = $('#startVr').data("kendoTimePicker");
var vrEndTimePicker = $('#endVr').data("kendoTimePicker");
var zaStartTimePicker = $('#startZa').data("kendoTimePicker");
var zaEndTimePicker = $('#endZa').data("kendoTimePicker");
var zoStartTimePicker = $('#startZo').data("kendoTimePicker");
var zoEndTimePicker = $('#endZo').data("kendoTimePicker");
if (a.value == "false" || a.value == "Afwezig") { //Ga door als de geselecteerde waarde "false" of "Afwezig".
switch (selected) { //Schakel de corresponderende velden uit
case 'maandag':
maStartTimePicker.enable(false);
maEndTimePicker.enable(false);
break;
case 'dinsdag':
diStartTimePicker.enable(false);
diEndTimePicker.enable(false);
break;
case 'woensdag':
woStartTimePicker.enable(false);
woEndTimePicker.enable(false);
break;
case 'donderdag':
doStartTimePicker.enable(false);
doEndTimePicker.enable(false);
break;
case 'vrijdag':
vrStartTimePicker.enable(false);
vrEndTimePicker.enable(false);
break;
case 'zaterdag':
zaStartTimePicker.enable(false);
zaEndTimePicker.enable(false);
break;
case 'zondag':
zoStartTimePicker.enable(false);
zoEndTimePicker.enable(false);
break;
}
} else if(a.value == "true" || a.value == "Aanwezig") { //Ga door als de geselecteerde waarde "true" of "Aanwezig is"
switch (selected) { //Schakel de corresponderende velden uit
case 'maandag':
maStartTimePicker.enable(true);
maEndTimePicker.enable(true);
break;
case 'dinsdag':
diStartTimePicker.enable(true);
diEndTimePicker.enable(true);
break;
case 'woensdag':
woStartTimePicker.enable(true);
woEndTimePicker.enable(true);
break;
case 'donderdag':
doStartTimePicker.enable(true);
doEndTimePicker.enable(true);
break;
case 'vrijdag':
vrStartTimePicker.enable(true);
vrEndTimePicker.enable(true);
break;
case 'zaterdag':
zaStartTimePicker.enable(true);
zaEndTimePicker.enable(true);
break;
case 'zondag':
zoStartTimePicker.enable(true);
zoEndTimePicker.enable(true);
break;
}
}
};
视图：
<div class="form-group">
@Html.LabelFor(model => model.maandag, htmlAttributes: new { @class = "control-label col-md-5" })
<div class="col-md-4">
@Html.EditorFor(model => model.maandag, new { htmlAttributes = new { @class = "form-control", id = "maandag", onchange="schakelAanUit(this)" } })
@Html.ValidationMessageFor(model => model.maandag, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-5"><b>van</b></p>
<div class="col-md-4">
<input id="startMa" class="form-control" style="width:280px;"/>
@Html.ValidationMessageFor(model => model.ma_van, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-5"><b>tot</b></p>
<div class="col-md-4">
<input id="endMa" class="form-control" style="width:280px;" />
@Html.ValidationMessageFor(model => model.ma_tot, "", new { @class = "text-danger" })
</div>
</div>