0

我有一个选择列表，并且基于该列表，除非选择了有效选项，否则我将按钮禁用，这可以正常工作，但是如果我按表单中的“重置”按钮，“提交”按钮将被启用，但仍应禁用（因为第一个选项的值为“”）。

我该如何补救？

谢谢

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>
4

3 回答 3

2

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

编辑：

顺便说一句，在这种情况下最好使用propattr而不是.

IE

$('#modMtFilterForm0').on('reset', function() {
    $("li#modFilterField_34 select").val('');
    $('.search input[type="submit"]').prop('disabled', true);
});
于 2013-04-11T16:54:36.853 回答
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.
    }
});

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

我希望这有帮助。

于 2013-04-11T16:54:53.073 回答
0

实际上，我在摩西和莫比的回答的帮助下自己解决了这个问题（它给了我这个想法）。

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

    $('.search input[type="submit"]').attr('disabled','disabled');
});
于 2013-04-11T17:10:57.910 回答