在视图中禁用按钮,直到将值输入字段?

时间:2013-10-01 10:32:02

标签: javascript jquery asp.net-mvc asp.net-mvc-3

使用数字小键盘将值传回POST。如果输入字段为空并且用户单击“订单”按钮,则会显示“网站无法显示”错误。

我想禁用“订购”按钮,直到在输入字段中输入值。

任何帮助表示赞赏:

     <table class="ui-bar-a" id="n_keypad" style="float: right;">
        <tr>
           <td><a data-role="button" data-theme="b" class="numero">7</a></td>
           <td><a data-role="button" data-theme="b" class="numero">8</a></td>
           <td><a data-role="button" data-theme="b" class="numero">9</a></td>
           <td><a data-role="button" data-theme="e" class="del">Del</a></td>
        </tr>
        <tr>
           <td><a data-role="button" data-theme="b" class="numero">4</a></td>
           <td><a data-role="button" data-theme="b" class="numero">5</a></td>
           <td><a data-role="button" data-theme="b" class="numero">6</a></td>
           <td><a data-role="button" data-theme="e" class="clear">Clear</a></td>
        </tr>
        <tr>
           <td><a data-role="button" data-theme="b" class="numero">1</a></td>
           <td><a data-role="button" data-theme="b" class="numero">2</a></td>
           <td><a data-role="button" data-theme="b" class="numero">3</a></td>
           <td><a data-role="button" data-theme="e" class="switch">+/-</a></td>
        </tr>
        <tr>
           <td><a data-role="button" data-theme="e" class="neg">-</a></td>
           <td><a data-role="button" data-theme="b" class="zero">0</a></td>
           <td><a data-role="button" data-theme="e" class="pos">+</a></td>
           <td></td>
        </tr>
    </table>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <p><button type="submit" name="command" value="Save" style="float: right;">Order</button></p>

</fieldset>
}

        <script>
        $(document).ready(function () {
            $('.numero').click(function () {
                if (!isNaN($('#myInput').val())) {
                    if (parseInt($('#myInput').val()) == 0) {
                        $('#myInput').val($(this).text());
                    } else {
                        $('#myInput').val($('#myInput').val() + $(this).text());
                    }
                }
            });
            $('.neg').click(function () {
                if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
                        $('#myInput').val(parseInt($('#myInput').val()) - 1);
                }
            });
            $('.pos').click(function () {
                if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
                    $('#myInput').val(parseInt($('#myInput').val()) + 1);
                }
            });
            $('.del').click(function () {
                $('#myInput').val($('#myInput').val().substring(0, $('#myInput').val().length - 1));
            });
            $('.clear').click(function () {
                $('#myInput').val('');
            });
            $('.zero').click(function () {
                if (!isNaN($('#myInput').val())) {
                    if (parseInt($('#myInput').val()) != 0) {
                        $('#myInput').val($('#myInput').val() + $(this).text());
                    }
                }
            });
            $('.switch').click(function () {
                var $input = $('#myInput');
                $input.val() != "" && !isNaN($input.val()) && $input.val(-$input.val());
            });
        });
    </script>

1 个答案:

答案 0 :(得分:1)

为您的订单按钮指定一个ID,并在更改输入值时启用它:

$("#order-button").removeAttr('disabled');

并再次禁用它:

$("#order-button").attr('disabled', 'disabled');

此外,服务器端验证始终是

的良好备份