Question

我有一个textfield，目前我在textfield没有hold three charactes时停用了提交按钮。我现在要做的还是勾勒出textfield 粗体红色并且仍然禁用submit按钮，但我似乎无法概述{{1}并同时禁用提交textfield。

我的禁用提交按钮的代码如下所示，当此函数中的button可以勾勒出textfield时的情况？

感谢任何帮助

length is < 3

Answer 1

添加border css属性以及attr('disabled')

在css中添加一个类来定义红色边框：

textarea[name=selectMessageForUpdate].disabled { border:5px solid red }

你的js：

$(function() {

        $('input[name="updateMessage"]').attr('disabled','disabled');
        $('textarea[name="selectMessageForUpdate"]').keyup(function(){
            if($(this).val().length < 3)
            {
                $('input[name="updateMessage"]').attr('disabled','disabled');
                $(this).addClass('disabled'); // ADD THIS
            }
            else
            {
                $('input[name="updateMessage"]').removeAttr('disabled');
                $(this).removeClass('disabled'); // ADD THIS
            }
        });

    });

我创造了一个js小提琴，它似乎有用......

http://jsfiddle.net/tmjaF/8/

Answer 2

他想要设置textarea的样式，而不是提交按钮。只需使用指定的标记向textarea添加一个类，并在输入有效时将其删除。还要检查输入是否只是空格。

$(function() {
    $('input[name=updateMessage]').attr('disabled','disabled');
    $('input[name=selectMessageForUpdate]').keyup(function(){
        if($('input[name=selectMessageForUpdate]').val().length < 3)
        {
            $('input[name=updateMessage]').attr('disabled','disabled');
            $('input[name=selectMessageForUpdate]').addClass('someClass');
        }
        else
        {
            $('input[name="updateMessage"]').removeAttr('disabled');
            $('input[name=selectMessageForUpdate]').removeClass('someClass');
        }
    });

});

Answer 3

添加到您的css：

input.indicated_textfield { border: 2px solid red; }

将addClass和removeClass行添加到您的Javascript代码中：

$(function() {

    $('input[name="updateMessage"]').prop('disabled', true);
    $('input[name="selectMessageForUpdate"]').keyup(function(){
        if($('input[name="selectMessageForUpdate"]').val().length < 3)
        {
            $('input[name="updateMessage"]').prop('disabled', true);
            $('input[name="selectMessageForUpdate"]').addClass('indicated_textfield');
        }
        else
        {
            $('input[name="updateMessage"]').prop('disabled', false);
            $('input[name="selectMessageForUpdate"]').removeClass('indicated_textfield');
        }
    });

});

jQuery大纲textfield显示错误

3 个答案: