根據用戶輸入即時/立即使Javascript可以互換

Question

在js代碼中，我創建了3個按鈕---按鈕1 ...按鈕2 ...按鈕3 和3個輸入欄---輸入欄1。 ..input場2 ...輸入字段3

從腳本中的所有按鈕都禁用的開始

按鈕1纔會被激活（您可以點擊它），當輸入字段1和2 numerated值

僅當輸入字段1和3具有編號值時，按鈕2纔會被激活

只有當輸入字段2和3具有數值時，按鈕3纔會被激活。

我的問題是，當我輸入的輸入字段1和2，按鍵1不會激活（在可點擊）一numerated值，即使它是假設

而且可以說，我重做我的代碼，並得到了我整個代碼向後，所以，在我的腳本開始時，所有的按鈕都沒有被禁用（你可以點擊它們）。然後我犯了一個簡單的條件語句，像這樣

輸入字段1 = IF1
輸入場2 - IF2

---

if (if1.length = 0 || isNaN(if1) && if2.length = 0 || isNaN(if2)) { 
document.getElementById("button 1").disable = true; 
} 

按鈕1將不會立即禁用直到按鈕上的用戶點擊。如果用戶要在輸入字段1中重新輸入適當的值類型，則按鈕1將不會激活（可單擊），因爲它顯然是永久禁用的。

所以下來總結，我問是否有一種方法可以使JavaScript立即交互。比如一個網頁瀏覽器的搜索欄。當你輸入一些東西的時候，你會立即得到一個可能的問題列表，當你沒有輸入任何東西時，列表就會消失，瀏覽器重新獲得它的原始狀態。

任何建議/幫助將不勝感激

由於生活和它的問題我的代碼一些如何刪除了。因此缺乏代碼和一堆文字。抱歉。

Answer 1

var field1 = document.getElementById('if1'); 
 
var field2 = document.getElementById('if2'); 
 
var field3 = document.getElementById('if3'); 
 

 
var button1 = document.getElementById('button1'); 
 
var button2 = document.getElementById('button2'); 
 
var button3 = document.getElementById('button3'); 
 

 

 
field1.addEventListener('input', function(){ 
 
    if(this.value!= '' && field2.value!='') 
 
     button1.disabled = false; 
 
    else 
 
     button1.disabled = true; 
 
    
 
    if(this.value!= '' && field3.value!='') 
 
     button2.disabled = false; 
 
    else 
 
     button2.disabled = true; 
 
}); 
 

 

 
field2.addEventListener('input', function(){ 
 
    if(this.value!= '' && field1.value!='') 
 
     button1.disabled = false; 
 
    else 
 
     button1.disabled = true; 
 
    
 
    if(this.value!= '' && field3.value!='') 
 
     button3.disabled = false; 
 
    else 
 
     button3.disabled = true; 
 
    
 
}); 
 

 

 
field3.addEventListener('input', function(){ 
 
    if(this.value!= '' && field1.value!='') 
 
     button2.disabled = false; 
 
    else 
 
     button2.disabled = true; 
 
    
 
    if(this.value!= '' && field2.value!='') 
 
     button3.disabled = false; 
 
    else 
 
     button3.disabled = true; 
 
    
 
});

<input type="text" id="if1"> 
 
<input type="text" id="if2"> 
 
<input type="text" id="if3"> 
 
<br> 
 
<button type="button" id="button1" disabled="true">Button1</button> 
 
<button type="button" id="button2" disabled="true">Button2</button> 
 
<button type="button" id="button3" disabled="true">Button3</button>

Answer 2

這裏是你如何做到這一點

禁用HTML按鈕

document.getElementById("Button").disabled = true; 

啓用HTML按鈕

document.getElementById("Button").disabled = false; 

Demo Here

編輯

試試這個...

您應用的addEventListener到DOM對象：

document.getElementById("IDTeam").addEventListener("change", function() {//call function here}); 

對於IE

document.getElementById("IDTeam").attachEvent("onchange", function() {//call function here}); 

Answer 3

通用溶液（使用屬性）

您可以查看以下答案，使用oninput事件和屬性來有效地處理您的情況。

我已經添加了一個data-target屬性來將元素鏈接在一起以符合您的要求。

例如，要匹配規則button 1 will only be activated (you can click on it) when input field 1 and 2 have numerated values,data-target的button1是ID爲textbox 1 & 2。

工作片段：

function checkInput() { 
 
    var dataTarget = 'data-target'; 
 
    var elm = event.target; 
 
    var targetAttrs = getAttr(elm, dataTarget); 
 
    if(targetAttrs) { 
 
    var targetButtons = targetAttrs.split(','); 
 
    
 
    for(var i = 0; i < targetButtons.length; i++) { 
 
     var button = document.getElementById(targetButtons[i]); 
 
     targetAttrs = getAttr(button, dataTarget); 
 
     if(targetAttrs) { 
 
     var targetTextBoxes = targetAttrs.split(','); 
 
     var valid = true; 
 
     
 
     for(var j = 0; j < targetTextBoxes.length; j++) { 
 
      var textBox = document.getElementById(targetTextBoxes[j]); 
 
      if(textBox) { 
 
      valid = isValidNumber(textBox.value); 
 
      } 
 
      
 
      if(!valid) { 
 
      break; 
 
      } 
 
     } 
 
     
 
     button.disabled = !valid; 
 
     } 
 
    } 
 
    } 
 
} 
 
     
 
function isValidNumber(val) { 
 
    return (val && val.length > 0 && !isNaN(val)); 
 
} 
 

 
function getAttr(elm, name){ 
 
    var val; 
 
    
 
    if(elm) { 
 
    var attrs = elm.attributes; 
 
    
 
    for(var i = 0; i < attrs.length; i++) { 
 
     if(attrs[i].name === name) { 
 
     val = attrs[i].value; 
 
     break; 
 
     } 
 
    } 
 
    } 
 
    
 
    return val; 
 
}

<div> 
 
    <input type="text" id="textBox1" oninput="checkInput()" data-target="button1,button2" /> 
 
</div> 
 
    <br/> 
 
<div> 
 
    <input type="text" id="textBox2" oninput="checkInput()" data-target="button1,button3" /> 
 
</div> 
 
    <br/> 
 
<div> 
 
    <input type="text" id="textBox3" oninput="checkInput()" data-target="button2,button3" /> 
 
</div> 
 
    <br/> 
 
<input type="button" id="button1" value="Submit" data-target="textBox1,textBox2" disabled /> 
 
<input type="button" id="button2" value="Submit" data-target="textBox1,textBox3" disabled /> 
 
<input type="button" id="button3" value="Submit" data-target="textBox2,textBox3" disabled />

注意：有了這個代碼，當你加入更多的元素，你並不需要更改/添加任何Javascript代碼。只需添加元素和屬性