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

jvitae 发布于 2019-03-09 jquery 最后更新 2019-03-09 14:42 2 浏览

我有一个选择列表,并基于此,我禁用了该按钮,除非选择了有效的选项,这可以正常工作,但如果我点击表单中的“重置”按钮,“提交”按钮变为启用状态,但应该禁用(因为第一个选项的值为“”)。 我该如何补救? 谢谢 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>
已邀请:

fnam

赞同来自:

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

$('.search button[type="reset"]').click( function() {
$('.search input[type="submit"]').attr('disabled','disabled');
});

tut

赞同来自:

您需要做的是将reset事件处理程序附加到您的form元素,并在需要时再次禁用该元素。为此我需要看到你的HTML或我可以给你一个一般的例子。 编辑: 顺便说一句,最好在诸如此类的情况下使用prop而不是attr。 即

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

tiste

赞同来自:

将其移动到一个函数中以减少重复;注意使用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.
    }
});
原因是用户仍然可以通过按照您接近它的方式在表单内的任何文本框中输入来提交表单。 我希望这有帮助。