How to make a readonly input field editable on the bases of dropdown option's value - vb.net-2010

Question

I am working on a ONLINE Order System using visual studio as framework and asp classic and vb.net as languages combined with html and javascript. I want to make input fields of a HTML form readonly and editable on the bases of selected value of a drop down list.My code is
<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>
I want to do that when user select 'bonus change" only relevant fields of bonus will editable and others will remain readonly. and when user select "price change" only relevant fields of price will be editable and other will change to readonly. Kindly guide me to solve my problem.
Thanx

Answer 1

First of all change your id's into a unique one(No elements should share the same id).
Simply add a corresponding classes on every input based on what class may be applicable for them. For example:
Class '1' is for Bonus Change
Class '2' is for Price Change
and so on...
<input type="text" id="ma" name="d_price" value="<%=rs("d_price")%>" class="1 2">
Then using JQuery:
$("#ma").change(function(){ // "ma": the id of your drop down(select)
var cls = $(this).val();
$('input').attr('disabled','disabled');
$('.'+cls).removeAttr('disabled');
});

Answer 2

at first change ids of input fields, id must be unique, use Jquery to do that, something like this
$(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>