0

我有一个带有 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>
4

1 回答 1

0

not seeing the HTML is hard, but take a look at this simple example. Fiddle basically I have 2 inputs: 

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

And a Jquery call (like yours except for the validation logic)

$(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 {
     }
   });
});

cheers

于 2013-10-03T11:30:08.663 回答