jQuery轮廓文本框显示错误

Question

我有一个textfield，此刻我禁用了提交按钮时textfield不hold three charactes。我现在想要做的也是概述textfield大胆的红色，仍然有submit按钮被禁用，但我似乎无法同时勾勒出textfield并禁用提交button。

我的禁用提交按钮的代码如下是有可能能够勾画出textfield时length is < 3这个函数的作用吗？

心存感激的任何帮助

$(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'); 
      } 
      else 
      { 
       $('input[name="updateMessage"]').removeAttr('disabled'); 
      } 
     }); 

    }); 

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 
      } 
     }); 

    }); 

我创建了一个爵士小提琴和它似乎工作...

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'); 
     } 
    }); 

});