-1

我正在使用visual studio作为框架，asp classic和vb.net作为结合html和javascript的语言来开发在线订单系统。我想根据下拉列表的选定值将 HTML 表单的输入字段设为只读和可编辑。我的代码是

<table border="0" width="61.2%" align=center><tr ><td  colspan=2  id="bg_page_title"                                   align="center" valign="middle"><strong>
Product Edit Wizard
</td></tr>
<tr>
<td align="right" width="50%"><b>Product Name:</b></td> 
<tr>
<td align="right" width="50%"><b>What You Want To Do:</b></td>
 <td width="50%">
 <select name="what_change" id="ma" onChange="changetextbox()" >

<option value="0"> Select Option</option>
<option value="1"  > Bonus Changed</option>
<option value="2"  > Price Changed</option>
<option value="3"  > Product Discontinue</option>
<option value="4"  > Product Re-Open</option>

 </select>
</td></tr> <tr id=Tr1>
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<tr id=Tr1>
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<input  type="text" id="ma" name="f_price" value="<%=rs("f_price")%>"  > </td>
</tr>
<tr id=Tr2>
<td align="right" width="50%" ><b>Ex-Dist Price:</b></td>
<td width="50%" ><input  type="text" id="ma" name="d_price" value="<%=rs("d_price")%>"   >   </td>
</tr>
<tr id=Tr3>
<td align="right" width="50%" ><b>Bonus Flat Rate:</b></td>
<td width="50%" ><input   type="text" id="ma" name="bonus_rate" value="     <%=rs("bonus_rate")%>"  </td>
</tr>
<tr id=Tr4>
<td align="right" width="50%" ><b>Bonus Scheme:</b></td>
<td width="50%" ><input type="text" id="ma" name="bonus_sch"  value="  <%=rs("bonus_sch")%>" > </td></tr>
<tr id=Tr5>
<td align="right" width="50%" ><b>Bonus Units:</b></td>
<td width="50%" ><input  type="text" id="ma" name="bonus_units"  value="<%=rs("bonus_units")%>" > </td></tr>

我想这样做，当用户选择“奖金更改”时，只有奖金的相关字段可编辑，其他字段将保持只读状态。当用户选择“价格更改”时，只有价格的相关字段可编辑，其他字段将更改为只读。请指导我来解决我的问题。谢谢

4

2 回答 2

0

首先更改输入字段的 id，id 必须是唯一的，使用 Jquery 来做到这一点，像这样

    $(document).ready(function(){

     $("#select_box_id").change(function(){

        $("input[type='text']").attr('disabled','disabled');
        $(".ma"+$(this).val()).removeAttr('disabled');
  })
})


<table border="0" width="61.2%" align=center><tr ><td  colspan=2  id="bg_page_title"                                   align="center" valign="middle"><strong>
Product Edit Wizard
</td></tr>
<tr>
<td align="right" width="50%"><b>Product Name:</b></td> 
<tr>
<td align="right" width="50%"><b>What You Want To Do:</b></td>
 <td width="50%">
 <select name="what_change" id="select_box_id" onChange="changetextbox()" >

<option value="0"> Select Option</option>
<option value="1"  > Bonus Changed</option>
<option value="2"  > Price Changed</option>
<option value="3"  > Product Discontinue</option>
<option value="4"  > Product Re-Open</option>

 </select>
</td></tr> <tr id="Tr1">
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<tr id="Tr1">
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
    <input  type="text" class="ma2" name="f_price" value=""  /> </td>
</tr>
<tr id="Tr2">
<td align="right" width="50%" ><b>Ex-Dist Price:</b></td>
    <td width="50%" ><input  type="text" class="ma2" name="d_price" value=""  />   </td>
</tr>
<tr id="Tr3">
<td align="right" width="50%" ><b>Bonus Flat Rate:</b></td>
    <td width="50%" ><input   type="text" class="ma1" name="bonus_rate" value=""/>  </td>
</tr>
<tr id="Tr4">
<td align="right" width="50%" ><b>Bonus Scheme:</b></td>
    <td width="50%" ><input type="text" class="ma1" name="bonus_sch"  value="" /> </td></tr>
<tr id="Tr5">
<td align="right" width="50%" ><b>Bonus Units:</b></td>
<td width="50%" ><input  type="text" class="ma1" name="bonus_units"  value=""/> </td></tr>
于 2013-10-02T07:35:50.150 回答
0

首先将您的 id 更改为唯一的（没有元素应该共享相同的 id）。只需根据可能适用于它们的类在每个输入上添加相应的类。例如：

  • '1' 级用于奖金变更
  • “2”类是针对价格变化的
  • 等等...

<input type="text" id="ma" name="d_price" value="<%=rs("d_price")%>" class="1 2">

然后使用 JQuery：

$("#ma").change(function(){   // "ma": the id of your drop down(select)
   var cls = $(this).val();
   $('input').attr('disabled','disabled');
   $('.'+cls).removeAttr('disabled');
});
于 2013-10-02T07:55:08.817 回答