Question

我有一个包含2个输入字段的表单，我希望第二个输入字段在第一个字段有效之前保持禁用状态。

它有效，但不是我期望的方式。如果第一个字段验证，则启用第二个字段，但如果我在第二个字段中单击，则会再次禁用。它只有在我使用tab键

时才有效

我怎样才能让表格按照我的期望工作？

    $("#bin").prop('disabled', true);
    $('#prefix').addClass('field_disabled');
    $('span').addClass('field_disabled');

    $('#toteform').bind('change keyup', function() {
        if($(this).validate().checkForm()) {
            $('#prefix').removeClass('field_disabled');
            $('span').removeClass('field_disabled');
            $('#bin').removeClass('field_disabled').prop('disabled', false);
        } else {    
            $('#prefix').addClass('field_disabled');
            $('span').addClass('field_disabled');
            $('#bin').addClass('field_disabled').prop('disabled', true);
        }
    });

    $('#form_result').hide();   

    // validate the comment form when it is submitted
    $("#toteform").validate({
        errorLabelContainer: '#errors',
        rules: {
            tote: {
                required: true,
                number: true,
                minlength: 4
            },
            bin: {
                required: true
            }
        }
    });
});

和html

<div id="main_div" class="container frame" style="text-align:center;">
        <div id="msgcontainer">
            <div id="errors"></div>
            <div id="form_result">Tote successfully added!!</div>
        </div>
        <form id="toteform" method="post" action="">
            <p><label>Tote Number:</label>
            <input type="text" name="tote" id="tote" maxlength="4"  autocomplete="off" autofocus tabindex="1" /></p>
            <p><label>Bin Number:</label></p>
            <div id="prefix"><span>J</span><input type="text" name="bin" id="bin" maxlength="4"  autocomplete="off" tabindex="2"  /></div>
            <input type="submit" name="submit" class="submit" id="submit" value="Submit tote number"  tabindex="3" />
        </form>
</div>

Answer 1

没有看到HTML很难，但请看一下这个简单的例子。 Fiddle 基本上我有2个输入：

<input type="text" id="form_1" placeholder="here">
<input type="text" id="form_2" placeholder="disable" class="not_valid" disabled>

和Jquery调用（除了验证逻辑之外都是你的）

$(document).ready(function() {
  $('#form_1').bind('change keyup', function() {
     // Your validation
     var length_var = $(this).val().length;
     if(length_var > 3) {
         $('#form_2').removeAttr('disabled');     
     } else {
     }
   });
});

欢呼声

Jquery表单验证。禁用输入，直到其他输入验证

1 个答案: