在jQuery中添加新行时,禁用其他选择框的选择选项
Disabled selected option for others select box when new row added in jQuery
我是jQuery新手,请帮助我解决下面的问题。
我有动态行动态选择框,我想编码这些选择框,就像当一个选项在选择框中被选中时,这应该在默认情况下在所有其他选择框中禁用,但是我这样做的选择框的变化,但是当我添加一个新的行相同的选项在启用新创建的选择框。
HTML:$(document).ready(function() {
GetDeonmination('Denomination');
}
function GetDeonmination(ddlId) {
$.getJSON("@Url.Action("
GetCash ")", function(data) {
var $select = $('#' + ddlId); //$('#down');
$.each(data, function(key, value) {
$('<option>').val(value.CashID).text(value.Denominatin).appendTo($select);
});
});
}
$('.addNewCash').on('click', function() {
i = rowCounts = $('#tbody tr').length;
addRow(i);
});
function addRow(i) {
var tr = '<tr class="dataCash">' +
'<td style="text-align:center">' +
'<select name="Denomination" class="Denomination" onchange="Calculate(''Count' + (i) + ''', ''Denomination' + (i) + ''', ''Total' + (i) + ''');" id="Denomination' + (i) + '">' +
'<option>--Select--</option>' +
'</select>' +
'</td>' +
'<td style="text-align:center"><input type="text" name="Count" id="Count' + (i) + '" class="Count" onkeyup="Calculate(''Count' + (i) + ''', ''Denomination' + (i) + ''', ''Total' + (i) + ''');" /></td>' +
'<td style="text-align:center"><input type="text" name="Total" class="Total" id="Total' + i + '" class="Total" /></td>' +
'<td style="vertical-align: middle; text-align:center"><a href="#" class="removeCash"><i class="glyphicon glyphicon-remove" style="text-align:center"></i></a></td>' +
'</tr>';
$('#tbody').append(tr);
GetDeonmination("Denomination" + i);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<table class="table table-hover table-bordered table-responsive" id="CashTable">
<thead>
<tr>
<td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Denomination</td>
<td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Count</td>
<td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;">Total</td>
<td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;">
<a href="#" class="addNewCash"><i class="glyphicon glyphicon-plus"></i></a>
</td>
</tr>
</thead>
<tbody id="tbody" class="tbody">
<tr class="dataCash">
<td style="text-align:center">
<select name="Denomination" class="Denomination" id="Denomination" onchange="Calculate('Count', 'Denomination', 'Total')">
<option>--Select--</option>
</select>
</td>
<td style="text-align:center">
<input type="text" name="Count" onkeyup="Calculate('Count', 'Denomination', 'Total');" class="Count" id="Count" />
</td>
<td style="text-align:center">
<input type="text" name="Total" class="Total" id="Total" readonly />
</td>
<td style="vertical-align: middle; text-align:center">
</td>
</tr>
</tbody>
</table>
当onchange事件被调用并且禁用选择框时,可以设置一个标志。当你添加新行时,你可以为新创建的select下拉菜单设置"disabled=true"
相关文章:
- 从下拉列表中选择其他选项时激活文本框
- 在选择其他下拉列表html和javascript araray的基础上,填充3个连续的下拉列表
- 在任一下拉列表中选择“其他”时,两个下拉菜单将打开一个文本框
- 下拉以在选择“其他”时添加输入
- 小部件上的菜单,在选择其他项目时单击关闭时打开
- 选择其他字段元素时如何重置选择选项下拉列表
- 如何选择其他范围滑块
- 如何在选择其他单选按钮后将其灰显,直到刷新
- 当用户使用 ASP.NET 从 Web 窗体中的“下拉列表列表”中选择“其他”时,文本框的显示方式
- 如何一次只选择一个单选按钮,并在数据来自数据库时在javascript中取消选择其他单选按钮
- 在选择其他项目时从列表中取消选择
- 选择其他文件夹
- 单击动态创建的选择,使用Javascript/jQuery选择其他动态内容
- 我想在从下拉列表中选择其他选项时激活一个文本框,否则它将保持不活动状态
- 如何在选中最后一个值时选择其他复选框
- JQuery移动单选按钮在选择其他按钮时保持选中状态.使用.html函数
- 如果使用select2选择了特定的值,则不允许选择其他选项
- 当选择其他项目时,删除切换类
- 用户选择'其他'后保存文本框数据;下拉框中的选项
- 如果用户选择“其他”,则显示一个文本框;在从数据库检索到的下拉菜单上