javascript - 基于单击的按钮隐藏 Kendo 实用程序窗口中的元素

Question

好的，这一切相对较新:我有一个 Kendo Grid，其中的客户 ID 是根据客户、年份以及客户获得帮助的次数自动生成的。要使用不同的地址或服务制作新副本，它会打开一个实用程序窗口，您选择公司，它会生成 Id，然后您填写字段。我还想使用它通过编辑按钮更新客户记录，打开相同的实用程序窗口但隐藏 Pick company 下拉菜单，因为已经创建了 Id。

这是在主页上:

<script>
function closeWindow(e) {
    $(this.element).empty();
}

function editJobs(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    var win = $("#utilityWindow").data("kendoWindow");
    win.refresh({ url: "/BackendSchedule/_Jobs?jobId=" + dataItem.Id});
    win.setOptions({
        title: "Edit Jobs",
        width: 1000,
        height: 600,
    });
    win.center().open();

}

function newJobs() {
    var win = $("#utilityWindow").data("kendoWindow");
    win.refresh({ url: "/BackendSchedule/_Jobs?jobId="});
    win.setOptions ({
        title: "Add New Jobs",
        width: 1000,
        height: 600,
    });
    win.center().open();
}

这是窗口

<form id="JobForm" class="form-horizontal">
    <fieldset class="input">
        <p class="info">

        </p>
        <p id="buildJobId" class="hidden">
            <label for="storeType">Store Type</label>
            @(Html.Kendo().DropDownList()
                .Name("storeType")
                .OptionLabel("please select")
                .BindTo((SelectList)ViewData["jobtypes"])
                .Events(e => e.Change("storeTypeChange"))
                .HtmlAttributes(new { style = "width:275px;" })
            )
        </p>
        <p>
            <label for="Id">Id</label>
            @Html.TextBoxFor(model => model.Id, new { @class = "k-textbox", @readonly = "readonly" })
        </p>
        <p>
             <label for="Company">Company Name</label>
                @(Html.Kendo().DropDownList()
                .Name("Company")
                .OptionLabel("Please Select")
                .BindTo((SelectList)ViewData["company"])
                .HtmlAttributes(new { style = "width:275px;" })
                )
        </p >
        <p>

            <label for="Address1">Address</label>
            @Html.TextBoxFor(model => model.Address1, new { @class = "k-textbox" })<br/> 
            <p> 
                <label for="Address2"></label>
                @Html.TextBoxFor(model => model.Address2, new { @class = "k-textbox" })
            </p>
        </p>
        <p>
            <label for="City">City</label>
            @Html.TextBoxFor(model => model.City, new { @class = "k-textbox" })
        </p>
        <p>
            <label for="State">State</label>
            @(Html.Kendo().DropDownList()
                .Name("State")
                .OptionLabel("Please Select")
                .BindTo((SelectList)ViewData["states"])
                .HtmlAttributes(new { style = "width:200px;" })
            )
        </p>
        <p>
            <label for="ZipCode">Zip Code</label>
            @Html.TextBoxFor(model => model.ZipCode, new { @class = "k-textbox" })
        </p>
        <p>
            <label for="ContactName">Contact Name</label>
            @Html.TextBoxFor(model => model.ContactName, new { @class = "k-textbox"})
        </p>
        <p>
            <label for="Phone">Phone</label>
            @Html.TextBoxFor(model => model.Phone, new { @class = "k-textbox", type = "tel" })
        </p>
        <p>
            <label for="Email">Email</label>
            @Html.TextBoxFor(model => model.Email, new { @class = "k-textbox", required = "required" })
        </p>
        <p>
            <label for="TimeAllowed">Time Allowed</label>
            @(Html.Kendo().NumericTextBoxFor(
        </p>
        <p>
            <label for="PlanStartDate">Plan Start Date</label>
            @(Html.Kendo().DatePickerFor(m => m.PlanStartDate))
        </p>
        <p>
            <label for="PlanEndDate">Plan End Date</label>
            @(Html.Kendo().DatePickerFor(m => m.PlanEndDate))
        </p>
        <p>
            <label for="ReponsibleParty">Responsible Party</label>
            @(Html.Kendo().DropDownList()
                .Name("Contact")
                .OptionLabel("Please Select")
                .BindTo((SelectList)ViewData["responsibleParty"])
                .HtmlAttributes(new { style = "width:300px;" })
            )
        </p>

        <p>
            <button class="k-button" id="submitForm" name="submitForm" type="submit">Submit</button>
            <button class="k-button right" id="cancelButton" type="button">Cancel</button>
        </p>
        <div id="message" class="text-danger"></div>
    </fieldset>
</form>

现在隐藏的 Id=buildJobId 将需要显示在创建新按钮上。

这是我认为可行的代码:

        if ($("#Id").data("TextBoxFor").dataSource.data(null)){
            $("#buildJobId").show();
        } else {
            $("#buildJobId").hide();
        };

Answer 1

添加了一些代码，但在最后一部分让它工作，我将它连接到将要调用的函数:

 $(document).ready(function() {
    var validator = $("#JobForm").kendoValidator().data("kendoValidator");
    var postUrl = "/BackendSchedule/Jobs_Update";

    if ("@ViewBag.Id".length == 0) {
        postUrl = "/BackendSchedule/Jobs_Create";
        $("#buildJobId").show();
    } else {
        $("#buildJobId").hide();
    }