在jQuery中添加新行时,禁用其他选择框的选择选项

Disabled selected option for others select box when new row added in jQuery

本文关键字:选择 其他 选项 jQuery 添加 新行时      更新时间:2023-09-26

我是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"