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

});