Question

我有一个选择列表，基于此我禁用了按钮，除非选择了有效选项，这样可以正常工作但是如果我点击表单中的“重置”按钮，“提交”按钮就会启用，但它应该是禁用仍然（因为第一个选项的值为“”）。

我该如何解决这个问题？

由于

jquery的：

if ($("li#modFilterField_34 select").val() == "") {
        $('.search input[type="submit"]').attr('disabled','disabled');
    }


    $("li#modFilterField_34 select").change(function(){

        if ($(this).val() == "Paintings" ) {

            $('.search input[type="submit"]').removeAttr('disabled');


        } else if ($(this).val() == "Houses" ) {

           $('.search input[type="submit"]').removeAttr('disabled');

        } else {

            $('.search input[type="submit"]').attr('disabled','disabled');
        }
    });

HTML：

    <form id="modMtFilterForm0" name="modMtFilterForm0" method="get" action="/oljadir/index.php">

        <ul class="modMtFilter" id="modMtFilter0">
        <li class="mfieldtype_selectlist" id="modFilterField_34">
<label>Choose type*:</label>
<span class="filterinput"><select class="inputbox text_area" name="cf34">
<option value="">&nbsp;</option>
<option value="Paintings">Paintings</option>
<option value="Houses">Houses</option>
</select>
</span></li>

<li class="mfieldtype_corename" id="modFilterField_1"><label>Name:</label><span class="filterinput"><input type="text" size="50" id="filter_cf1" name="link_name" class="inputbox text_area"></span></li><li class="mfieldtype_mcheckbox" id="modFilterField_33"><label>Ostalo::</label><span class="filterinput"><ul style="margin:0;padding:0;list-style-type:none"><li><input type="checkbox" id="filter_cf33_0" value="KTV" name="cf33[]"><label for="filter_cf33_0">KTV</label></li><li><input type="checkbox" id="filter_cf33_1" value="Internet" name="cf33[]"><label for="filter_cf33_1">Internet</label></li><li><input type="checkbox" id="filter_cf33_2" value="Prevoz" name="cf33[]"><label for="filter_cf33_2">Prevoz</label></li></ul></span></li>        <li class="button-send"><input type="submit" onclick="javascript:var cookie = document.cookie.split(';');for(var i=0;i &lt; cookie.length;i++) {var c = cookie[i];while (c.charAt(0)==' '){c = c.substring(1,c.length);}var name = c.split('=')[0];if( name.substr(0,35) == 'com_mtree_mfields_searchFieldValue_'){document.cookie = name + '=;';}}" value="Search" disabled="disabled"></li>
    <button type="reset">Reset</button>


        </ul>

    </form>

Answer 1

您需要做的是将reset事件处理程序附加到form元素，并在需要时再次禁用该元素。为此我需要看到你的HTML或我可以给你一个一般的例子。

修改

BTW，最好在prop之类的情况下使用{{3}}而不是attr。

即

$('#modMtFilterForm0').on('reset', function() { $("li#modFilterField_34 select").val(''); $('.search input[type="submit"]').prop('disabled', true); });

Answer 2

将其移至功能中以减少重复;注意使用prop，而不是attr：

function doDisableButton(){
    $('.search input[type="submit"]').prop('disabled', true);
}

如果值为空，请按照您的操作调用它：

if ($("li#modFilterField_34 select").val() == "") {
   doDisableButton();
}

单击重置按钮时也可以调用它。

$('.search input[type="reset"]').click(function(){
   doDisableButton();
});

这就是修复代码的方法。就个人而言，我会使用jQuery验证或表单提交来处理它：

$("form").on("submit", function(){
    if ($("li#modFilterField_34 select").val() == "") {
        //alert user with a div, or even better use jQuery validation to handle this with a rule.
    }
});

原因是用户仍然可以通过按照您接近它的方式按表格内的任何文本框输入来提交表单。

我希望这会有所帮助。

Answer 3

我实际上是在摩西和白鲸的回答的帮助下解决了这个问题（它给了我这个想法）。

$('.search button[type="reset"]').click( function() {

    $('.search input[type="submit"]').attr('disabled','disabled');
});

按钮在RESET上启用但不应该启用

3 个答案: