-1

私は、Visual Studio をフレームワークとして、asp クラシックと 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 を共有する要素はありません)。適用可能なクラスに基づいて、すべての入力に対応するクラスを追加するだけです。例えば：

  • クラス「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 に答える
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 に答える