Question

我想检查一个字段集中的所有输入是否都有“有效”类。如果是，请启用提交按钮

<form>
// This fieldset will have a classname "valid" when the image suits the requirements
<fieldset id="fieldset-large" class="ssa-fieldset">
    <input type="file"> 
</fieldset>

<fieldset id="fieldset-small" class="ssa-fieldset">
    <input type="file"> 
</fieldset>

... more fieldsets coming ...

<button type="submit">Next step</button>
</form>

我的目标是：

if ($('#fieldset-large').hasClass('valid') && $('#fieldset-small').hasClass('valid')) {
    FORM_SUBMIT_BUTTON.removeAttr('disabled');
} else {
    FORM_SUBMIT_BUTTON.attr('disabled','disabled');
}

如何使其更通用？

Answer 1

如果您的意思是所有输入，请改用：

.dropdown {
    position: relative;
    min-width: 130px;
    /*padding-right: 34px;*/
    height: 34px;
    background: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    margin-top: 12px;
}

此代码取决于您拥有的字段集，并且只有单个元素仅存在于

中

Answer 2

如果添加了valid类，您可以使用：

$('form').on('change', function(){ // change event or input event
    var $inputs = $(this).find(':input:not(:submit)'); // get all form inputs except the submit one(s)
    $(this).find(':submit').prop('disabled', $inputs.length !== $inputs.filter('.valid').length); // check all have class valid
}).change(); //trigger change event once bound

否则，API的方法是使用pattern(?)/required属性，并使用form检查form.checkValidity()的有效性

Answer 3

尝试：

var valid = false;
$("fieldset input").each(function() {
    if (!$(this).hasClass("valid")) valid = false;
    else valid = true
});
valid == false ? $("button").attr("disabled", "disabled") : $("button").removeAttr("disabled")

演示：https://jsfiddle.net/lotusgodkk/pmadwvpk/5/

Answer 4

您需要在表单中找到.ssa-fieldset。然后为每个结果检查是否有类valid。如果某些输入没有将新的isValid定义为false并打破循环。之后，只需检查isValid的值，然后启用或禁用提交按钮。

var isValid = false; 
$('form').find('.ssa-fieldset').each(function(){
    if(this).hasClass('valid'){
        isValid = true;
    }else{
        isValid = false;
        break;
    }
}
if(isValid === true){           
    $('input[type="submit"]').removeProp('disabled');
}else{
    $('input[type="submit"]').prop('disabled', true);
}

Answer 5

选择所有fieldset和循环

$('form > fieldset').each(function(){
    if ($(this).find("input").hasClass('valid')) {
        FORM_SUBMIT_BUTTON.removeAttr('disabled');
    } else {
        FORM_SUBMIT_BUTTON.attr('disabled','disabled');
         return false;
    }

    });

Answer 6

在添加字段集 js函数中（如果您打算使用此功能），请手动触发$('form').change();

$('form').on('change',function(){
    // get fieldset element count
    var fcnt = $(this).find('fieldset').length;
    // get fieldset element count having a "valid" class
    var vcnt = $(this).find('fieldset[class*="valid"]').length;

    if(fcnt == vcnt)
        $(this).find('button[type="submit"]').removeAttr('disabled');
    else
        $(this).find('button[type="submit"]').attr('disabled','disabled');
});

// to manually trigger form change
$('form').change();

检查所有输入在字段集内是否有效的通用解决方案，如果是，则启用按钮

6 个答案: