在点击提交按钮后使禁用的功能保持不变

Question

我有一个form，带有多个下拉菜单和一个submit 按钮。基于从DropDown 做出的任何选择，我正在禁用其他下拉菜单，但在我点击提交按钮后，它会刷新页面，set 禁用下拉菜单到enabled。即使在页面刷新后，我如何才能使这些下拉菜单禁用。

下面是我的Script：

<script>
    //Script to disable the dropdown on any selection
    var pickId;
    $(document).ready(function () {
        $('select').change(function () {
            $this = $(this);
            pickId= $this.attr('id');
            pickValue = $this.val();
            if (pickId== 'type') {
                $('select').prop('disabled', false);
                if (pickValue == 'one') {
                    $('#parts').prop('disabled', true);
                } else if (pickValue == 'two') {
                    $('#country').prop('disabled', true);
                } else if (pickValue == 'three') {
                    $('#parts').prop('disabled', true);
                    $('#country').prop('disabled', true);
                    $('#today').prop('disabled', true);
                }
            }
        })
    });
</script>

我的JSP页面：

<div id='first'>
<form id='form' method='post' action='/test/'>
<input type="hidden" name="action" value="checker">

<select id="type" name="selectionOne">
    <option value="main">selection1</option>
    <option value="one">Selection2</option>
    <option value="Two">Selection3</option>
    <option value="Three">Selection3</option>
</select>

<%                       // tried to do in JSP but did not work???
    String typeChker = request.getParameter("selectionOne");
%>
<script>      // tried to do in JSP but did not work???
    document.getElementById("type").value = '<% out.print(typeChker); %>';
</script>

<select id="Parts" name="partially">
    <option value="1">1</option>
    <option value="12">12</option>
</select>
<%
    String dur = request.getParameter("partially");
%>
<script>
    document.getElementById("Parts").value = '<% out.print(dur); %>';

    var e = document.getElementById("Parts");
    var strUser = e.options[e.selectedIndex].text;
</script>

<select id="country" name="ally">
     <option value="6">USA</option>
    <option value="9">UK</option>
</select>
<select id="today" name="aty">
    <option value="123">Today</option>
   <option value="6">tomorrow</option>
</select>
<input type="Submit" Value="Submit">
</form></div>

点击提交按钮后，它会调用 servlet 以根据这些选择提供响应，从而刷新整个 test.jsp 如何使禁用的值持久化 直到用户不自行更改选项。

如果我有任何错误，请纠正我，我需要添加什么以使其持久。

Answer 1

在禁用下拉菜单时在 Javascript 中设置一个 cookie，在页面加载时读取该 cookie 并在 Javascript 中再次禁用。或者将禁用移动到 JSP 中并使用会话。

要在 JSP 中禁用，您可以执行以下操作：

<%
boolean blnOneIsDisabled =  //get from session
String oneIsDisabled = (!blnOneIsDisabled) ? "" : "disabled='true'";
%>
<select id="type" name="selectionOne" <%=oneIsDisabled%> >

Answer 2

我有点困惑你在用提交按钮做什么，但你可以尝试使用带有 .on('submit") 的 jquery。preventDefault() 应该阻止它刷新页面。

$(function () {
    $('form').on('submit', function (e) {
     //code to run when submitting
      });
      e.preventDefault();