Question

我正在用html做一个表单。当我在下拉框中选择一个选项时，我希望启用一些输入框，并根据所选的选项禁用一些选项。我可以完成其中一个选项，但是当我更改重复的代码时，它会弄乱第一个选项。

javascript function:|
-------------------
<script>
function changeTextBox() {
var comp = document.getElementById('comparator');
if(comp.value=='billing_report')
    document.getElementById('from').disabled=false;
    document.getElementById('to').disabled=false;
    document.getElementById('component').disabled=true;
    document.getElementById('company').disabled=false;
    document.getElementById('salesperson').disabled=false;

else
 document.getElementById('job_no').disabled=true;
 document.getElementById('staff_name').disabled=true;
}
</script>

...

html code:|
-----------
<form name="Web Order Form" id="Web Order Form">
<table style="position:absolute; left:580px; top:210px; height:34px;" border="0"   bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="50%" cellpadding="5" cellspacing="5">
  <tr style="position:absolute; left:0px; top:-42px;">
    <td>Select Report:</td>
    <label style="font-size:16px" for="comparator">Comparator:</label>
    <td><select id="comparator" name="comparator" onChange="changeTextBox();">
     <option value="please_select" id="please_select">Please Select...</option>
     <option value="billing_report" id="billing_report">Billing Report</option>
     <option value="courier_report" id="courier_report">Courier Report</option>
     <option value="management_summary_report" id="management_summary_report">Management Summary Report</option>
     <option value="production_report" id="production_report">Production Report</option>
     <option value="prospect_list" id="prospect_list">Prospect List</option>
     <option value="staff_absence_report" id="staff_absence_report">Staff Absence Report</option>
     <option value="stock_report" id="stock_report">Stock Report</option>
    </select>
    <label style="font-size:16px" for="to">Value:</label>
    <input type="number" id="value" disabled/></td>
  </tr>

  <tr>
 <div style="position:absolute; left:545px; top:130px; width:510px; height:420px;  border:1px solid black">
  <tr>
   <td>From:</td>
   <td><input type="input" value="from" id="from"></td>
   <td>To:</td>
   <td><input type="input" value="to" id="to"></td>
  </tr>

  <tr>
   <td>Component:</td>
   <td><input type="input" value="" id="component"></td>
  </tr>

  <tr>
   <td>Company:</td>
   <td><input type="input" value="" id="company"></td>
  </tr>

  <tr>

   <td>Job No:</td>
   <td><input type="input" value="" id="job_no"></td>
  </tr>

  <tr>
   <td>Sales Person:</td>
   <td><input type="input" value="" id="salesperson"></td>
  </tr>

  <tr>
   <td>Staff Name:</td>
   <td><input type="input" value="" id="staff_name"></td>
  </tr>

  <tr style="position:absolute; left:125px; top:275px;">
    <td><input type="submit" value="Build Report"></td>
    <td><input type="reset" value="Reset"></td>
  </tr>
 </div>

<div style="position:absolute; top:115px; left:730px; width:117px; height:30px; background-image: url(Images/reports.jpg); layer-background-image:url(Images/reports.jpg)">
</div>

因此，当选择结算报告时，“组件”，“Job_No”和“Staff_Name”将被禁用。

如果在下拉列表中选择了组件报告：那么只会启用“收件人”和“来自”。

如果在下拉列表中选择了生产报告，则禁用每个输入框。

依旧等等。如果我得到前两个，我相信我可以做其余的事。谢谢。任何帮助，将不胜感激。我在stackoverflow上看了这样的其他问题，但是无法让它工作。

Answer 1

您只需每次都重置字段。只需添加一个函数来重置所有字段，并使用您的条件，只需启用您想要的字段。

JS：

function changeTextBox() {
    var comp = document.getElementById('comparator');
    resetFields();    // Disabling all the fields.
    if (comp.value == 'billing_report') {
        document.getElementById('from').disabled = false;
        document.getElementById('to').disabled = false;
        document.getElementById('company').disabled = false;
        document.getElementById('salesperson').disabled = false;
    } else if (comp.value == 'courier_report') {
        // Enable the fields you want   
    } else {
        // Rest of your conditions.
    }
}

function resetFields() {
    document.getElementById('from').disabled = true;
    document.getElementById('to').disabled = true;
    document.getElementById('component').disabled = true;
    document.getElementById('company').disabled = true;
    document.getElementById('job_no').disabled = true;
    document.getElementById('salesperson').disabled = true;
    document.getElementById('staff_name').disabled = true;
}

选中此JSFiddle

Answer 2

事情有一种令人讨厌的趋势，即成长为真正使代码混乱并使其无法管理的问题。我使用矩阵来应对复杂性

var disabler= [];
var disablerfields=      ['from','to','company','salesperson','component','job_no','staff_name'];
disabler['billing_report']=[1,     1,   0,        0,            1,          0,       0];
disabler['courier_report']=[0,     0,   1,        1,            1,          1,       1];
...

和代码（简化）

var todo = disabler[document.getElementById('comparator').value];
for (var i=0, l=todo.length; i<l; i++) {
  document.getElementById(disablerfields[i]).disabled = todo[i];

选中每个下拉选项时禁用所选输入框？

2 个答案: