为某个选项的特定值禁用表单上的提交按钮

Question

我创建了一个 JSP 并且我有这个表格：

    <form action="Cinema" method="get">
    <select name="IdRoom" id="selectBox">
        <option disabled="disabled" selected> Choose a Cinema </option>         
        <c:forEach items="${listCinema}" var="singleCinema">
            <option value="${singleCinema.idSingleCinema}">${singleCinema.localName}</option>
        </c:forEach>
    </select>
    <input id="buttonSubmit" type="submit" value="Submit" />
</form>

作为第一行（在 for 之前），我添加了如下值：

<option disabled="disabled" selected> Choose a Cinema </option>

页面上传后，如果我尝试点击按钮功能，它会调用我的服务（不应该），但在我打开下拉列表后，下拉列表的第一个值被正确禁用。当仅针对下拉列表的第一个值（不针对其他值）上传页面时，我需要禁用此选项的提交按钮

Answer 1

向 select 添加一个 onchange 侦听器，并将禁用属性添加到提交按钮，如下所示：

<select name="IdRoom" id="selectBox" onchange="this.form.buttonSubmit.disabled=this.options[this.selectedIndex].value=='your-first-value'">

<input id="buttonSubmit" type="submit" value="Submit" disabled="disabled">

只要下拉列表的值发生变化，就会触发onchange。在这种情况下，每当您 select 一个值时，它都会检查 selected 值是否等于您的第一个值。如果是这样，提交按钮的 disabled 属性设置为 true，否则设置为 false。

希望对您有所帮助！！

Answer 2

$(document).ready( function() {
  $("select").on('change',function(){
     if($(this).find('option:selected').text() == "Choose a Cinema")
         $("#buttonSubmit").attr('disabled', true);
     else
         $("#buttonSubmit").attr('disabled', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="Cinema" method="get">
    <select name="IdRoom" id="selectBox">
        <option disabled="disabled" selected> Choose a Cinema </option>         
        <c:forEach items="${listCinema}" var="singleCinema">
            <option value="${singleCinema.idSingleCinema}">${singleCinema.localName}</option>
        </c:forEach>
    </select>
    <input id="buttonSubmit" disabled="disabled" type="submit" value="Submit" />
</form>

为某个选项的特定值禁用表单上的提交按钮

Disable submit button on a form for a certain value of an option

javascript

jquery

jsp

submit

option