[英]how to disable in another select box when the other selection box is selected in the same row using jquery
I want to do disable in another select box when the other selection box is selected (option value = 3) in the same row. 当在同一行中选择另一个选择框(选项值= 3)时,我想在另一个选择框中禁用它。
There are many rows in a table. 表格中有很多行。 In each row, there has three select box in each column.
在每一行中,每一列都有三个选择框。 If I selected the select box in first column and the option value of selected box is 3, I want to make disable the second select box in the same row.
如果我在第一列中选择了选择框,并且选择框的选项值为3,则要禁用同一行中的第二个选择框。
I wrote the code as the followings. 我写的代码如下。
my code is not working when the new row added in the table after I click Add Row button. 单击添加行按钮后,在表中添加了新行时,我的代码不起作用。 I need some guideline.
我需要一些指导。
javascript : javascript:
<!-- add new row -->
<script>
$(document).ready(function() {
var id = 0;
// Add button functionality
$("#addrow").click(function() {
id++;
/*var master = $(this).parents("table.fancyTable");*/
var master = $(this).parents("table.stdform");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "");
/*prot.find(".id").attr("value", id);*/
master.find(".fancyTable tbody").append(prot);
$(".fancyTable tbody tr:nth-child(odd)").addClass("odd");
$(".fancyTable tbody tr:nth-child(even)").addClass("even");
});
});
</script>
<!-- change select box -->
<script>
$(document).ready(function() {
$('.processing_code').bind('change', function(){
var data = $(this).val();
alert(data);
if(data == 3){
$(this).parent('td').siblings().find(".parameter1").attr("disabled", "true");
}
});
});
</script>
css : css:
<style>
.fancyTable .prototype {
display:none;
}
.odd{
background-color: #ddd;
}
.even{
background-color: #eee;
}
</style>
jsp : jsp:
<input type="button"
name="btn_JobTempReg_addrow" class="mediumbutton"
value="Add Row" id="addrow" />
<div class="container_12 ">
<div class="grid_job_mod height400">
<table class="fancyTable" id="sortable-table"
cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th>header one</th>
<th>header two</th>
<th>header three</th>
</tr>
</thead>
<tbody id="job-tbody">
<tr class="prototype">
<td>
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</td>
<td>
<s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
</td>
<td>
<s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
</td>
</tr>
<s:iterator value="p_jobTmpEnt" var="temEnt" status="status">
<tr>
<td>
<s:if test="#temEnt.processing_code == 1">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
<s:if test="#temEnt.processing_code == 2">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="2" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
<s:if test="#temEnt.processing_code == 3">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="3" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
</td>
<td>
<s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
</td>
<td>
<s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
</div>
Thanks in advance. 提前致谢。
try this.. 尝试这个..
<script>
$(document).ready(function() {
$('.processing_code').bind('change', function(){
var data = $(this).val();
if(data == 3){
$(this).parent('td').siblings()
.find(".parameter1")
.attr("disabled", "disabled");
}
});
});
</script>
$('.processing_code').change(function() {
if($(this).val() ==3)
$(this).next('select').attr("disabled", "true");
else
$(this).next('select').attr("disabled", "false");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.