jQuery验证：特定元素有效时的函数

我有一个表单，它通过jQuery验证插件在submit和onblur上进行验证。在表单中，我有一个元素，在另一个元素出现之前应该禁用它。因此，我正在寻找一种在特定元素有效时执行函数（删除禁用的attr）的方法

代码如下所示

当#klas有效时，应启用#ll naam。另一方面，当#klas无效时，应禁用#ll-naam，以便用户无法进行任何输入

我花了几个小时努力寻找正确的解决方案，但这次，无论是文档还是谷歌似乎都不是我的朋友。有人能帮我吗

提前谢谢

jQuery：

$("#newAp").validate({               
    validClass: 'succes',
    ignore: '#opmerking',
    errorContainer: '#newap-error',
    rules: {
        docent: {
            required: true,
            minlength: 4,
            remote: "handlers/validationInSqlArray.php"
        },
        'vak': {
            required: true,
            remote: "handlers/validationInSqlArray.php"
        },
        'klas': {
            required: true,
            remote: "handlers/validationInSqlArray.php",
            valid: function(element){
                $('#ll-naam').removeAttr("disabled");
                $("#ll-naamErrorLabel").hide();
                $('#ll-naam').focus();
            }
        },
        'll-naam': {
            required: true
        },
        'datum': {
            required: true
        }
    },
    messages: {
        docent: {
            required: "Vul uw achternaam in",
            remote: "Alleen namen uit de suggestielijst zijn toegestaan",
            minlength: jQuery.validator.format("Vul minimaal {0} tekens in."),
        },
        vak:  {
            required: "U dient een vak in te vullen",
            remote: "Alleen vakken uit de suggestielijst zijn toegestaan",
        },
        klas: {
            required: "Vul een klas in",
            remote: "Alleen klassen uit de suggestielijst zijn toegestaan"
        },
        'll-naam': "Voer de naam van de leerling in",
        datum: "Selecteer een terugkomdatum"
    }
});

表格：

<form method="post" action="" id="newAp" class="form">
    <div class="alert alert-error" id="newap-error">
        <p>Corrigeer de rood gemarkeerde velden</p>
    </div>
    <h2 class="form-title">Leerling aanmelden</h2>
    <label for="docent">Docent</label>
    <input type="text" name="docent" id="docent" placeholder="Vul uw achternaam in"/>

    <label for="vak">Vak</label>
    <input type="text" name="vak" id="vak" placeholder="Vul de naam van het vak in"  />

    <label for="klas">Klas (stamgroep)</label>
    <input type="text" name="klas" id="klas" placeholder="Klas van de leerling" value="" />

    <label for="ll-naam">Leerling</label>
    <input type="text" name="ll-naam" id="ll-naam" placeholder="Naam van de leerling" disabled />
    <label class="error" id="ll-naamErrorLabel">Vul eerst de klas in</label>

    <label for="opmerking">Opmerking</label>
    <textarea name="opmerking" name="opmerking" placeholder="Opmerking voor de surveillant."> </textarea>
    <input type="hidden" name="opmerking_ph" value="Opmerking voor de surveillant." />

    <label for="date">Terugkom datum</label>
    <input type="text" name="datum" id="datum" readonly='true' placeholder="Klik om datum te selecteren" />

    <input type="submit" class="submit" value="Opslaan" />

</form>

科里格尔·德鲁德·杰马尔基德·维尔登酒店

利林·安梅尔登
讲解员
瓦克
克拉斯（斯坦格罗普）
利林
瓦勒·埃斯特·德·克拉斯
奥默金
特鲁格姆基准面

jsidle示例

您可以使用jQuery.validate的“highlight”和“unhighlight”方法

通过定义“highlight”回调，可以在字段无效时执行操作；因此，禁用任何其他相关字段。使用“取消高亮”，您可以在某个字段现在有效时执行操作，并启用任何其他相关字段

从：

您可以检查

元素的name属性，并根据触发突出显示事件的元素禁用另一个相关字段，而不是先淡出然后淡入无效元素。
以同样的方式，您可以将其相反的定义为“unhighlight”，并根据现在启用的字段启用禁用的字段

顺便说一句，我的建议是向您的输入标记添加一个自定义属性，该属性将指定哪些其他字段依赖于此字段，并根据该属性启用/禁用字段。这样，您就可以最小化高亮显示/取消高亮显示事件所需的代码，并为将来的表单创建一个可重用的代码

有关您的问题的详细信息，请参阅手册。
谢谢Dvir。坦率地说，这没有成功。虽然在元素有效时使用unhighlight执行函数似乎是合乎逻辑的，但现在仍然会执行函数，不管是有效还是无效。请参阅下面的代码。你的建议很受欢迎，但你能再精确一点吗？我想我没有得到你的建议。unhighlight:function（element，errorClass）{if（element=='#klas'）{$（'#ll-naam'）.removeAttr（“disabled”）；$（“#ll-namerrollabel”）.hide（）；$（'#ll-naam'）.focus（）}@DennisHunink，您获得的
元素
不是元素的ID，而是元素的jQuery对象。如果您想获得它的ID，您应该尝试
if（element.attr（“ID”）==“klas”）{}
@DennisHunink，再次查看我的答案顶部，我添加了一个JSFIDLE示例，其中包含您的验证过程的简化版本。）哇，真是妙计！非常感谢！我真的很清楚，你花了很多时间来创建这个例子；这很好地指出了我的错误，给了我从中学习的机会。谢谢！
$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn();
     });
  }
})