Question

我的表格很小。

两个选择框元素和一个提交按钮。

选择选择时共同选择框元素，触发ajax请求。

我想要做的是，禁用UNTIL用户从选择下拉列表中选择的提交按钮。

在启用“提交”按钮之前，他们必须从BOTH选择下拉列表中进行选择。

我不介意在选择之前隐藏提交按钮。

简要说明：

<form id="ad_form" method="post" action="">
    <p>
        <select id="ad_type" name="ad_type">
            <option value="" selected="selected">Select premium ad type</option>
            <option value="<?php echo TYPE_USER;?>">Featured Agent</option>
            <option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
        </select>
        <label for="ad_type" class="labelStrong">Advertising Type</label>
    </p>
    <p>
        <select id="ad_duration" name="ad_duration">
            <option value="" selected="selected">Select premium ad duration</option>
            <option value="weekly">Weekly</option>
            <option value="fortnightly">Fortnightly</option>
            <option value="monthly">Monthy</option>
        </select>
        <label for="ad_duration" class="labelStrong">Advertising Duration</label>
    </p>

    <p>
        <div id="calender">
        </div>
    </p>
    <p>
        <input type="submit" name="submit" value="Submit" id="submitorder" />
    </p>
</form>

Answer 1

这是一个似乎可以做你想做的演示：

http://jsfiddle.net/Yr59d/

该javascript代码将进入$(document).ready()块

Answer 2

如果您为所有选择提供了一个共同的班级名称（例如＆＃39; required＆＃39;），您可以执行以下操作：

$('select.required').change(function() {
  var total = $('select.required').length;
  var selected = $('select.required option:selected').length;

  $('#submitorder').attr('disabled', (selected == total));
});

这不是经过测试的代码。 This documentation可能有所帮助。 This jquery discussion也可能会有所帮助。

Answer 3

$(function() {
    $("#submitorder").css("visibility", "hidden");

    $("#ad_form select").bind("change", function() { 
        if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
           $("#submitorder").css("visibility", "visible");
        } else {
           $("#submitorder").css("visibility", "hidden");
        }
    });
});

Answer 4

Gah，我将不得不同意Kon这一个 - 修复 - 现在担心 - 它后来的答案有它们的位置但是优雅的解决方案同时很简单必须要走的路。

我的解决方案:(来自以下网站的信用：JQuery Enable / Disable Submit Button in IE7）

$('select.required').change(function() {
  var total =  = $('select.required').length;
  var selected = $('#ad_form').find("select.required option[value!='':selected").length;

  $('#submitorder').prop('disabled', (selected != total));
});

顺便说一句，感谢ctcherry在JSFiddle网站上演示代码 - 我之前没有看过，并且将来会使用它！

Answer 5

在两个选择按钮上使用侦听器进行更改，并检查另一个是否也已设置。如果设置，请启用提交按钮。

禁用SUBMIT按钮，直到选择框选项

5 个答案: