如何改變在JavaScript

Question

我需要的代碼Javacript一個功能更新按鈕的顏色，並把它當所有的字段都有效按鈕狀態。下面 見圖片，瞭解與形式

當管理員希望只有在滿足以下申請

1. 至少有一個更新的更新按鈕必須是綠色的用戶的用戶交互編輯按鈕已啓用。 （當編輯按鈕被啓用時，相應的字段被刪除，用戶可以寫東西）
2. 該字段必須實時驗證
3. 如果我取消選中字段，腳本必須重新驗證其他打開的字段。對於實例，如果打開字段爲空，則該按鈕應該是紅色的，但如果我關閉了該字段，並且啓用了另一個字段並填充了有效文本（假設只有1個字符表示有效），則紅色按鈕應變爲綠色

能否請你幫我想出解決辦法。我認爲一個解決方案是使用JQuery的密碼功能，但它僅限於一個字段。我需要更全球化的東西。

是否有一個JavaScript的方式來創建一個全球性的按鈕偵聽比是這種情況

此外，當我打開密碼複選框兩個字段啓用按鈕應該是唯一的，如果密碼是有效的有效有用並與確認密碼匹配

請參考下面

我省略了密碼字段的小圖標和代碼

的引導部分JSP頁面的小結

我用JavaScript第一學嘗試低於它僅適用於密碼字段，但它不與編輯按鈕

$("input[type=password]").keyup(
      function() { 
       var ucase = new RegExp("[A-Z]+"); 
       var lcase = new RegExp("[a-z]+"); 
       var num = new RegExp("[0-9]+"); 

       if ($("#password").val().length >= 8) { 
        $("#8char").removeClass("glyphicon-remove"); 
        $("#8char").addClass("glyphicon-ok"); 
        $("#8char").css("color", "#00A41E"); 
       } else { 
        $("#8char").removeClass("glyphicon-ok"); 
        $("#8char").addClass("glyphicon-remove"); 
        $("#8char").css("color", "#FF0004"); 
       } 

       if (ucase.test($("#password").val())) { 
        $("#ucase").removeClass("glyphicon-remove"); 
        $("#ucase").addClass("glyphicon-ok"); 
        $("#ucase").css("color", "#00A41E"); 
       } else { 
        $("#ucase").removeClass("glyphicon-ok"); 
        $("#ucase").addClass("glyphicon-remove"); 
        $("#ucase").css("color", "#FF0004"); 
       } 

       if (lcase.test($("#password").val())) { 
        $("#lcase").removeClass("glyphicon-remove"); 
        $("#lcase").addClass("glyphicon-ok"); 
        $("#lcase").css("color", "#00A41E"); 
       } else { 
        $("#lcase").removeClass("glyphicon-ok"); 
        $("#lcase").addClass("glyphicon-remove"); 
        $("#lcase").css("color", "#FF0004"); 
       } 

       if (num.test($("#password").val())) { 
        $("#num").removeClass("glyphicon-remove"); 
        $("#num").addClass("glyphicon-ok"); 
        $("#num").css("color", "#00A41E"); 
       } else { 
        $("#num").removeClass("glyphicon-ok"); 
        $("#num").addClass("glyphicon-remove"); 
        $("#num").css("color", "#FF0004"); 
       } 

       if ($("#password").val() == $("#confirmpassword").val() 
         && ($("#confirmpassword").val() != 0)) { 
        $("#pwmatch").removeClass("glyphicon-remove"); 
        $("#pwmatch").addClass("glyphicon-ok"); 
        $("#pwmatch").css("color", "#00A41E"); 
       } else { 
        $("#pwmatch").removeClass("glyphicon-ok"); 
        $("#pwmatch").addClass("glyphicon-remove"); 
        $("#pwmatch").css("color", "#FF0004"); 
       } 

       if ($("#password").val().length >= 8 
         && ucase.test($("#password").val()) 
         && lcase.test($("#password").val()) 
         && num.test($("#password").val()) 
         && $("#password").val() == $("#confirmpassword").val() 
         && ($("#confirmpassword").val() != 0)) { 
        $("#updateUserBtn").removeClass("btn-danger"); 
        $("#updateUserBtn").addClass("btn-success"); 
        $("#updateUserBtn").prop('disabled', false); 
       } else { 
        $("#updateUserBtn").removeClass("btn-success"); 
        $("#updateUserBtn").addClass("btn-danger"); 
        $("#updateUserBtn").prop('disabled', true); 
       } 
      }); 

Answer 1

連接到form元素A keyup處理器會被中調用任何字段連接它有一個keyup事件。這是因爲大多數事件都會通過他們所有的祖先鼓起來，並且可以在任何級別上聽取。

的要求:)小例子

$("form").keyup(
     function() { 
      // your existing code here 
     }); 

如果您只想定位爲改變特定輸入，你可以使用，而不是連接到表單（此人使用的具體形式ID）委派處理程序：

$("#formsubmit").on('keyup', 'input[type=text],input[type=password]', 
     function() { 
      // your existing code here 
     }); 

這適用於事件時間的選擇等是相當有效率，同時也意味着this值將是所變更的控制（如果這是對你有用）。

作爲一般的jQuery指南，只運行一次選擇器並保存元素。這是更快&短並且通常更具有可讀性。你也可以將大多數jQuery函數鏈接在一起。

例如

var $password = $("#password"); 
var $8char = $("#8char"); 

if ($password.val().length >= 8) { 
     $8char.removeClass("glyphicon-remove").addClass("glyphicon-ok").css("color", "#00A41E");