Question

我想编写某种功能，允许添加功能以在用户具有以下任一项时启用“搜索”按钮：

在任一选择框中进行选择
或在页面的其中一个输入框中输入了值

反之亦然，如果选择框或输入框中的任何一个为空，则禁用搜索按钮。

我提前道歉，并且想说我是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>

Answer 1

您应该使用jQuery change()函数，如下所示：

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

为您的输入提供禁用类，禁用按钮，如：

.disabled{
     pointer-events: none;
}

当有人在您选择的输入中选择某些内容时，上面的代码将删除此类。

更新：

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

这将删除＆＃34;禁用＆＃34;按钮属性。

Answer 2

我会使用watch来改变选择，然后执行以下操作：

b.f90

这将涵盖选择框。对于文本输入，我会执行以下操作：

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

这是整个事情的小提琴https://jsfiddle.net/6fn8744w/1/。这假设您正在使用jquery。这可能不是最简洁的方法，因为我自己还在学习所有这些，但它似乎运作良好。

Answer 3

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>

用户键入或进行选择时启用“搜索”按钮

3 个答案: