Question

我是一名程序员，目前正致力于一个正在进行的项目。

我的问题是：我有3个提交按钮（在同一表格上），每个按钮都调用不同的动作。如果HTML Selector（下拉列表）没有任何可供选择的选项，则会禁用这些按钮已。

我的表单目前看起来像这样：

        <form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;">
        <div class="col-md-9">

            <div class="form-group form-inline">
                <label asp-for="OrderNumber">Order number: </label>
                <input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus />
            </div>

            <div>
                <label>Delete</label>
                <input asp-for="Deletion" type="checkbox" />
            </div>

            <div>
                <div class="col-md-4">
                    <input class="btn btn-block" type="submit" name="action" value="Receive" />
                </div>
                <div class="col-md-4">
                    <input class="btn btn-block" type="submit" name="action" value="Start" />
                </div>
                <div class="col-md-4">
                    <input class="btn btn-block" type="submit" name="action" value="Finish" />
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group form-inline">
                <label asp-for="ProfileId">Profile: </label>
                <select asp-for="ProfileId" class="form-control">
                    @foreach (var p in Model.Profiles)
                    {
                        <option value="@p.ProfileId">@p.Name</option>
                    }
                </select>
            </div>
        </div>
    </form>

感谢您提供任何帮助，如果您需要更多信息，或者此问题描述不清楚，请随时提出！：）

Answer 1

为您的按钮添加ID。将它们设置为禁用（启用=“假”）。

更改下拉列表时调用javascript函数。

检查调用onchange的函数中的下拉列表的selectedIndex，并相应地设置该按钮。

我可以写一个可以做到的功能，但你不会学到任何东西。如果你做了一些研究，试着写一下这个函数，如果它不起作用我会修复它。

Answer 2

根据其他表单字段是否具有相同的条件要求，只需禁用表单字段即可。你可以给他们一个自定义类并使用一些javascript代码并用类似的JS切换类。

toggleAttribute = function(className,index){
      var eLs = [].slice.call(document.getElementsByClassName(className),0);
      for(var i=0; i<eLs.length; i++){
         eLs[i].disabled=(index==0 ? false : true); //index 0 is for 'Yes'
      }
}

Answer 3

我想出了一个使用Razor的解决方案。

我的表单现在看起来像这样：

        <form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;">
        <div class="col-md-9">
            <div class="form-group form-inline">
                <label asp-for="OrderNumber">Order number: </label>
                <input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus />
            </div>
            <div>
                <label>Delete</label>
                <input asp-for="Deletion" type="checkbox" />
            </div>
            <div>
                <div class="col-md-4">
                    <input class="btn btn-block" type="submit" name="action" value="Receive"
                           @{ if (Model.Profiles.Count() == 0) { @: disabled="disabled"
                                                                                       } } />
                </div>
                <div class="col-md-4">
                    <input class="btn btn-block" type="submit" name="action" value="Start"
                           @{ if (Model.Profiles.Count() == 0) { @: disabled="disabled"
                                                                                       } } />
                </div>
                <div class="col-md-4">
                    <input class="btn btn-block" type="submit" name="action" value="Finish"
                           @{ if (Model.Profiles.Count() == 0) { @: disabled="disabled"
                                                                                       } } />
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group form-inline">
                <label asp-for="ProfileId">Profile: </label>
                <select asp-for="ProfileId" class="form-control">
                    @foreach (var p in Model.Profiles)
                    {
                        <option value="@p.ProfileId">@p.Name</option>
                    }
                </select>
            </div>
        </div>
    </form>

我添加了一个if语句，用于检查我的配置文件列表中是否有任何配置文件。如果没有（0），则会将 disabled =“disabled”属性添加到我的输入中。

感谢任何试图帮助我解决这个问题的人，并为我提供解决方案的建议：）

HTML Select为空时禁用“提交”按钮

3 个答案: