啓用搜索按鈕，當用戶鍵入或作出選擇

我想寫某種功能，將允許添加的功能，使「搜索」按鈕，當用戶有兩種：啓用搜索按鈕，當用戶鍵入或作出選擇

在任一的選擇框進行的選擇
或已鍵入一個值的輸入框中一個頁面上

反之亦然，如果任一選擇或輸入框是空的，然後禁用搜索按鈕。

我很抱歉提前說過我是JavaScript的新手，但我不知道從哪裏開始，網絡上的其他示例讓我感到困惑，似乎並不符合我的需求。

下面是HTML標記：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     Cars 
     <select id="car"> 
      <option value=""></option> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="mercedes">Mercedes</option> 
      <option value="audi">Audi</option> 
     </select> 
     <br><br> 

     Fruits 
     <select id="fruits"> 
      <option value=""></option> 
      <option value="apple">apple</option> 
      <option value="banana">banana</option> 
      <option value="pear">pear</option> 
      <option value="strawberry">strawberry</option> 
      <option value="mango">mango</option> 
      <option value="orange">orange</option> 
     </select> 
     <br><br> 

     Vegetable 
     <input type="input" id="veggie"> 
     <br><br> 

     Number 
     <input type="input" id="number"> 
     <br><br> 

     <input type="button" value="search" disabled> 
    </body> 
</html>

來源

2016-07-27 BobbyJones

您是否嘗試對輸入[類型= 「按鈕」]使用.removeAttr（「無效」）？ – MCMXCII

Upvote for「combeluded」。 :)你使用jQuery？如果是這樣，那麼@MCMXCII的問題呢？ – BobRodes

看看鏈接： [disable-enable-an-input-with-jquery]（http：// stackoverflow。com/questions/1414365/disable-enable-an-input-with-jquery）回答存在 bye – Arcadio

你應該使用jQuery的change()功能，如：

$("select#fruits").change(function(){ 
    $('input[type="button"]').removeClass("disabled"); 
});

給你的輸入，禁止類似按鈕的禁用類：

.disabled{ 
    pointer-events: none; 
}

上面的代碼刪除這個類時，有人選擇這樣的在你選擇的輸入上進行計算。

UPDATE：

$("select#fruits").change(function(){ 
    $("input[type="button"]").removeAttr("disabled"); 
});

這消除了您的按鈕「已禁用」屬性。

來源

2016-07-27 16:35:17 m1crdy

「禁用」課程究竟在哪裏？ :) – BobRodes

把這個放在你的css文件中，或者直接放在你的html上面，由 – m1crdy

用css指針事件去除禁用的屬性有什麼好處？ – MCMXCII

我會用手錶在選擇的變化，然後像做了如下：

$("#fruits").change(function() { 
    var fruitSelect = $(this).val(); 
    if(fruitSelect != ""){ 
     $("#searchBox").prop("disabled", false); 
    } 
});

這將包括選擇框。對於文字輸入，我會做類似如下：

$('#numero').on('input', function() { 
    $("#searchBox").prop("disabled", false); 
});

這裏是整個事情小提琴https://jsfiddle.net/6fn8744w/1/。這假設你正在使用jQuery。這可能不是最簡潔的方法，因爲我仍然自己學習所有這些，但它似乎運作良好。

來源

2016-07-27 17:07:07 joshmath

jQuery可能會給你一個更簡單的代碼，但純Javascript可能也會完成這項工作。當然，這樣的東西有很多方法。

讓我知道如果這個解決方案是你想要它做的。快樂的編碼！ =）

<html> 

<head> 

</head> 

<body> 
Cars 
    <select id="car" onchange="checkField()"> 
    <option value=""></option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<br><br> 
Fruits 
<select id="fruits" onchange="checkField()"> 
    <option value=""></option> 
    <option value="apple">apple</option> 
    <option value="banana">banana</option> 
    <option value="pear">pear</option> 
    <option value="strawberry">strawberry</option> 
    <option value="mango">mango</option> 
    <option value="orange">orange</option> 
</select> 
<br><br> 
Vegetable 
<input type="input" id="veggie" onchange="checkField()"> 
<br><br> 
Number 
<input type="input" id="number" onchange="checkField()"> 
<br><br> 

// you can also use disabled="disabled" instead of just disabled 
<input id="btn-search" type="button" value="search" disabled> 

<script type="text/javascript"> 

    function checkField(){ 
     var car = document.getElementById('car').value; 
     var fruits = document.getElementById('fruits').value; 
     var veggie = document.getElementById('veggie').value; 
     var number = document.getElementById('number').value; 


     if(car=="" && fruits =="" && veggie=="" && number=="") { 
      // this is one of the ways to disable a html element 
      document.getElementById('btn-search').disabled = "disable";  
     } else { 
      // and this is how you enable it 
      document.getElementById('btn-search').disabled = false;  
     } 

    } 

</script>

來源

2016-07-27 17:09:40

啓用搜索按鈕，當用戶鍵入或作出選擇

回答

相關問題