0

2 つの入力フィールドを持つフォームがあり、最初のフィールドが有効になるまで 2 番目の入力フィールドを無効にしたままにします。

それは機能しますが、私が期待する方法ではありません。最初のフィールドが有効になると、2 番目のフィールドが有効になりますが、2 番目のフィールドをクリックすると再び無効になります。タブキーを使用した場合にのみ機能します

期待どおりにフォームを機能させるにはどうすればよいですか?

    $("#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

HTML を見ないのは難しいですが、この簡単な例を見てください。 基本的にフィドルには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 {
     }
   });
});

乾杯

于 2013-10-03T11:30:08.663 に答える