Question

我有一些输入元素，如果输入元素不完整，我希望包含一个禁用的复选框。但是，我不能使用onClick属性。下面是一个小提琴。如您所见，我的目标是，如果input1和input2留空，则应禁用结果复选框。有什么建议吗？

HTML

Input 1:<select name="input1" id="input1" initialvalue="">
<option class="no-op" value="">-- Please select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
Input 2:<select name="input2" id="input2" initialvalue="">
<option class="no-op" value="">-- Please select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
Result:<input type="checkbox" name="result" id="result">

的Javascript

var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var result = document.getElementById('result');

function(){
    if(input1 == "" && input2 == ""){
        result.disabled = true;
    } else {
        result.disabled = false;
    }

}

Answer 1

您需要检查input1.value == ""，而不仅仅是input1 == ""

您还需要最初激活您的方法，并在每次选择列表更改值时运行它。

为该函数命名

function setCheckState(evt) {
    if (input1.value == "" || input2.value == "") {
        result.disabled = true;
    } else {
        result.disabled = false;
    }
}

添加事件监听器

input1.addEventListener('change', setCheckState);
input2.addEventListener('change', setCheckState);

触发方法以获取初始复选框状态设置

setCheckState();

查看我的update to your fiddle

Finally，您可以将if()语句缩减为简单的作业...

function setCheckState(evt) {
    result.disabled = input1.value == "" || input2.value == "";
}

[edit] ...感谢dave，基于问题陈述＆＃34;如果输入元素不完整则禁用。＆＃34; 我相信你对使用{{}是正确的1}}而不是|| ...更新此答案并再制作一个fiddle change。

Answer 2

我认为这就是你想要的：

function update(dropdown, check) {
  if(dropdown.options[dropdown.getSelectedIndex].text != "--Please select--") {
     check.disabled = false; // if value is not equal to --Please select--...
  } else {
     check disabled = true;
  }
}

var check // = checkbox elem

var in1 // = dropdown 1 elem
var in2 // = dropdown 2 elem

in1.onchange = function() {
  update(in1, check); // update checkbox 
}

in2.onchange = function() {
  update(in2, check); // update checkbox
}

希望这会有所帮助，对于任何输入错误感到抱歉，我正在打电话。

javascript有条件地禁用复选框

2 个答案: