Question

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

Answer 1

您可以在调用onchange事件时设置标志，并禁用选择框。当你追加一个新行时，你可以为新创建的选择下拉列表设置“disabled = true”。

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

1 个答案: