Question

我正在尝试编写一个函数：

如果未选择保管箱中的选项（即选择空字符串），请禁用提交按钮。启用所有Dropbox。
用户选择保管箱中的选项（不是空的字符串），禁用所有其他下拉框并启用提交按钮。

然而，作为JavaScript的初学者，我不知道如何开始这个。我该怎么写这样的代码？

所以我简化的HTML如下：

<form id="form" name="form" method="post" action="confirmation.cshtml">
   <select name="start_to_end_time" class="start_to_end_time">
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <select name="start_to_end_time" class="start_to_end_time">
      <option value="3">3</option>
      <option value="4">4</option>
   </select>

   <button type="submit">Submit</button>

如何编写实现此功能的代码？

Answer 1

首先将按钮加载为禁用：

   <button id="myButton" type="submit" disabled='disabled'>Submit</button>

另外，为您的选项添加一个onchange监听器：

    <select onchange="myJSFunction()" name="start_to_end_time" class="start_to_end_time">
  <option value="3">3</option>
  <option value="4">4</option>

然后，编写javascript函数：

    function myJSFunction(){
     var myButton = document.getElementById('myButton');
     myButton.removeAttribute("disabled");
}

检查所选值并相应地禁用（这必须在onchange方法调用的函数中执行）：

    var mySelect =document.getElementById('mySelect');
    var mySelectedIndex = mySelect.selectedIndex;
if (mySelectedIndex==0){
    mySelect.setAttribute("disabled","disabled);

}

Answer 2

我认为给两个HTML元素赋予相同的名称属性并不是一个好主意，除非你在其中使用方括号[]。最后一个可能会覆盖第一个的值。

使用MooTools的JavaScript：

$$('.start_to_end_time').each(function(element) {
    element.addEvent('click', function(ev) {
        $$('.start_to_end_time').each(function(selectbox) {

                if (element.getProperty('value') != '') {
                    $('button').setProperty('disabled', '');
                    $$('.start_to_end_time').each(function(b) {
                        if (b != element) {
                            b.setProperty('disabled', 'disabled');
                        } else {
                            b.setProperty('disabled', '');
                        }
                    }
                } else {
                    $('button').setProperty('disabled', 'disabled');
                    $$('.start_to_end_time').each(function(b) {
                        b.setProperty('disabled', '');
                    }
                }
        });
    });
});

我没有测试代码。您可以定义一些方法以使其更具可读性。

在一个选择值时禁用其他Dropbox

2 个答案: