如何在javascript中禁用文本字段和组合框答案

【问题标题】：how to disable text field and combo box in javascript如何在javascript中禁用文本字段和组合框
【发布时间】：2014-03-27 15:09:52
【问题描述】：

我在使用另一个组合框禁用文本框和组合框时遇到问题，到目前为止，这是我的 javascript：

 category.onchange = function () {
 var val = this.options[this.selectedIndex].value;   
 document.getElementById("bos").disabled = (val == "Military","Civilian") ? true : false;
 document.getElementById("afpsn").disabled = (val ==  "Dependent","Civilian") ? true : false;
};

这是我的html：

<select name="category" size="1" id="category">
  <option selected="selected">Choose...</option>
  <option value="Civilian">Civilian</option>
  <option value="Military">Military</option>
  <option value="Dependent">Dependent</option>
            </select>

  <select name="bos" id="bos" >
  <option value="">Branch of Service</option>
  <option value="PAF">PAF</option>
  <option value="PA">PA</option>
  <option value="PN">PN</option>
  <option value="TAS">TAS</option>
</select>

  <input id = "afpsn"  name="afpsn" type="text" id="afpsn" size="38" placeholder="AFPSN" />

当我选择从属或平民时，其他组合框和文本字段将被禁用，并在我选择军事时启用。请帮忙！

【问题讨论】：

标签： javascript html combobox

【解决方案1】：

This fiddle 会帮助你。你也可以编辑逻辑。

category.onchange = function () {
 var val = this.options[this.selectedIndex].value; 
  //  alert(val);
 document.getElementById("bos").disabled = (val === "Military") ? false : true;
    document.getElementById("afpsn").disabled = (val === "Military") ? false : true;
 document.getElementById("afpsn").disabled = (val ===  "Dependent" || val ===  "Civilian" ) ? true : false;
 document.getElementById("bos").disabled = (val ===  "Dependent" || val ===  "Civilian" ) ? true : false;
};

【讨论】：

【解决方案2】：

我认为没有像 (val == "Military","Civilian") 这样的东西 You can try this Fiddle

【讨论】：

【解决方案3】：

试试下面的代码：

/*Function to check if value is in an array*/
function isInArray(value, array) {
  return array.indexOf(value) > -1;
}
/*******************************************/

var s=document.getElementById("elementId");
s.disabled = isInArray(s.value,["Military","Civilian"]); //Function automatically returns "true" or "false" depending on value

Demo Fiddle

【讨论】：

【解决方案4】：

试试这个：

您的情况（与strings 比较）不正确。

example

category.onchange = function () {
    var val = this.options[this.selectedIndex].value;
    document.getElementById("bos").disabled = (val === "Military" || val === "Civilian") ? true : false;
    document.getElementById("afpsn").disabled = (val === "Dependent" || val === "Civilian") ? true : false;
};

编辑：

要在页面加载时附加事件（假设您没有使用 jQuery），一种方法是将其附加到页面加载上，如下所示：

function init() {
    category.onchange = function () {
        var val = this.options[this.selectedIndex].value;
        document.getElementById("bos").disabled = (val === "Military" || val === "Civilian") ? true : false;
        document.getElementById("afpsn").disabled = (val === "Dependent" || val === "Civilian") ? true : false;
    };
}

在你的 <body> 上还有类似的东西

<body onload="init();">
   ...
</body>

这个例子起作用的原因是jsfiddle.net默认在加载时加载js框中的函数。但在您的情况下，您必须手动执行此操作。

【讨论】：

为什么它在我的页面中不起作用？？它没有任何 jquery 库，是吗？
您的代码和此解决方案不需要任何 jQuery。可以看到上面的 fiddle 链接没有包含任何 jQuery。
现在无法将其放在我的页面上...为什么它不起作用？ :(
也许您忘记在 body onload 上附加事件？
怎么附加？我该怎么办？