我正在尝试编写一个函数:
然而,作为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>
如何编写实现此功能的代码?
答案 0 :(得分:0)
首先将按钮加载为禁用:
<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);
}
答案 1 :(得分:0)
我认为给两个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', '');
}
}
});
});
});
我没有测试代码。您可以定义一些方法以使其更具可读性。