Question

我正在使用visual studio作为框架和asp经典和vb.net作为语言结合html和javascript使用ONLINE订单系统。我想在下拉列表的选定值的基础上，使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>

当用户选择“奖金更改”时，我想这样做，只有相关的奖励领域可以编辑，其他人将保持只读。当用户选择“价格变化”时，只有相关的价格区域可以编辑，其他将改为只读请指导我解决我的问题。 Thanx

Answer 1

在输入字段的第一个更改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>

Answer 2

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

班级'1'用于奖励更改
Class'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');
});

如何根据下拉选项值使只读输入字段可编辑

2 个答案: