启用/禁用表单提交按钮不起作用

Posted 2023-05-09

【中文标题】启用/禁用表单提交按钮不起作用

【英文标题】：enable/disable form submit button not working

【发布时间】：2012-12-10 02:27:53

【问题描述】：

我一直在使用一个表单，我希望禁用提交按钮，除非选择了 textarea 和 select 选项。

textarea 验证工作正常，问题出在选择上。 问题是选择从将值传递给选择的自定义下拉列表中获取其值，我认为这是问题所在，因为脚本不接受它，因为选择具有值。

脚本在以下情况下有效： a) 您首先选择一个选择选项，然后在 textarea 中输入。 b) 你在 textarea 中输入，选择一个选项，然后在 textarea 中再次输入。

启用/禁用按钮的脚本是这样的

    $(function () 
        $("#result, #content-text-ta").bind("keyup change",
  function ()       
      if ($("#content-text-ta").val() != "" && $("#result").val() != "")
          $(this).closest("form").find(":submit").removeAttr("disabled").removeClass('disabled').addClass('enabled');
      else
          $(this).closest("form").find(":submit").attr("disabled", "disabled").removeClass('enabled').addClass('disabled');      
      );
        );

将值传递给选择的文本区域和下拉列表 (id="catselect")

<textarea title="Post Text" name="content-text-ta" id="content-text-ta"></textarea>
<dl id="sample" class="dropdown">
                    <dt><a href="#" ><span class="cat" tabindex="1">Elige categoria</span></a></dt>
                        <dd style="z-index: 1;">
                            <ul>
                                <li><a href="#">Citas Famosas<span class="value">1</span></a></li>
                                <li><a href="#">Frases Bonitas<span class="value">2</span></a></li>
                            </ul>
                        </dd>
                    </dl>
                    <fieldset">
                        <select name='categories' id='catselect' class='tdomf_categories' size='1'>
                            <option id="result"></option>
                        </select>
                    </fieldset>

【参考方案1】：

使用以下代码：

function validateForm() 
    if ($("#content-text-ta").val() !== "" && $("#catselect").val().length > 0) 
        $("form").find("input[type*='submit']").removeAttr("disabled").removeClass('disabled').addClass('enabled');
     else 
        $("form").find("input[type*='submit']").attr("disabled", "disabled").removeClass('enabled').addClass('disabled');
    

$(function() 
    $("#catselect").html("");
    $(".dropdown dd ul li a").click(function() 
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#catselect").val($("#sample").find("dt a span.value").html());
        validateForm();
    );
    $("#catselect").append($("<option/>", 
        value: "",
        text: $(this).find('span').first().contents().filter(function() 
            return this.nodeType == 3;
        ).text()
    ));
    $(".dropdown dd ul li").each(function() 
        $("#catselect").append($("<option/>", 
            value: $(this).find(".value").text(),
            text: $(this).find('a').first().contents().filter(function() 
                return this.nodeType == 3;
            ).text()
        ));
        $("#catselect, #content-text-ta").bind("keyup change click", validateForm);
    );​

Live Demo | Source