Question

所以我碰巧有一个表单，用户从选择列表中选择一个项目，然后通过提交表单将其添加到页面中。表单和结果列表都在同一页面上，因此项目列表可以包括已添加为已添加项目周围标记中ID的项目的主键。

我希望能够禁用之前添加到页面的任何项目的选择列表中的条目。我的JavaScript是这样的：

$('#EquipmentId').each(function () {
  if ($('#' + $(this).val()).length) {
    $(this).attr('disabled', 'disabled');
  }
});

选择列表（#EquipmentId）是一个机器列表，其中Value是作为Guid的机器的主键。当所选机器的列表写入页面时，它们位于列表中，其中列表项具有机器的Guid作为其ID（<li id="[Guid]">Equipment</li>）。

不幸的是，即使已经选择了多台计算机，现在也没有正确禁用选择列表中的条目。即使ID在页面上，JavaScript似乎也没有禁用选择列表中的相应条目，因此无法将机器添加到页面两次。

建议？

编辑：我认为人们对我要找的东西和我需要修改的内容感到困惑。

选择列表是#EquipmentId。它只存在一次。它提供了一个机器列表，主键为Guid作为值，机器名称为文本。用户可以通过选择并提交表单来添加计算机。将计算机添加到页面后，它会在HTML中显示为<li id="[Guid]">Equipment</li>，其中Guid是其在选择列表中的值。我需要JavaScript来查看，对于选择列表中的每个项目，页面上是否存在ID及其值。如果确实存在此类ID，请在“选择列表”中禁用该特定条目。

这会阻止同一台机器被多次添加到页面中，并确保任何一个Guid仅在页面上作为ID存在一次（如果它一直存在）。

编辑2：这是我的原始HTML：

<form class="form-inline body-form" role="form" method="post" action="/HEO/AssignEquipment/70b079f0-3a45-e611-8274-14feb5fbeae8">
  <div class="form-group col-sm-4">
    <label class="control-label" for="EquipmentId">Equipment</label>
    <select id="EquipmentId" class="form-control" name="EquipmentId">
      <option value="">« ‹ Select › »</option>
      <option value="de3e5768-612e-43e8-a6a4-cce6060e66c7">Articulated Rock Truck</option>
      <option value="80aa47af-bd75-4a98-8aca-9a8fd2c70a0a">Compactor</option>
      <option value="5087a0db-00a8-4a18-ad0a-59388e540f83">Crane</option>
      <option value="04e4a3d3-8199-4250-a53e-0be119f2b48a">Delimber</option>
      <option value="6de52fd3-2b7e-4680-8db5-af8c1bf74b55">Dozer </option>
      <option value="a68d8f70-6bae-4b12-8e8e-cbd42ac0ed60">Excavator</option>
      <option value="ec06f40a-7177-4604-b3e2-021fdb3b72cc">Feller Byncher</option>
      <option value="4936faa7-25fd-4775-a733-a84decccf988">Forklift</option>
      <option value="33f9826c-1cbe-43a5-b37d-cf7dca9490c9">Front End Loader</option>
      <option value="d56b6fed-198d-48c8-8f90-5d447a242970">Grader</option>
      <option value="e5c4b730-2815-4dcf-888d-2f12e4d6c1af">Horizontal Grinder</option>
      <option value="f057c8fc-515e-4098-bb05-8ece3ff0332d">Loader</option>
      <option value="70cfe933-8ab6-4871-b784-47ddb0a379e3">Milling Equipment</option>
      <option value="35ca60e0-cdd6-4b45-bf55-63755b979172">Motor Grader</option>
      <option value="683fa8d3-c19d-4fe5-865f-809e057c2c90">Mulcher</option>
      <option value="387555cf-b823-4ac2-84dc-4e1f89baa61b">Pipelayer</option>
      <option value="92b03391-930a-456c-8f06-a3b3ab9a3d73">Processor</option>
      <option value="252c3db4-2fee-4c23-944b-2f362e1961c8">Rock Breaker</option>
      <option value="dfbd74a7-7b3f-48a2-a31b-81d520be22ca">RubberTire Backhoe</option>
      <option value="e9a55159-0685-4e1d-b363-b3432d9cfb28">Skidder</option>
      <option value="f0a326a9-9533-4655-8822-a9d1b2ed959e">Skidsteers</option>
      <option value="da107259-84a6-4662-abbb-00c8ece89499">Skip Loader</option>
      <option value="43f2ba52-40c4-442f-a5f4-d685346e992b">Telehandler</option>
      <option value="564289b9-b39c-47e1-941a-4bbafba1bd0f">Tub Grinder</option>
      <option value="9aa99772-1204-4c43-8e08-505971dbc932">Underground Truck</option>
    </select>
  </div>
  <div class="form-group col-sm-4">
    <label class="control-label" for="EquipmentHours">Hours</label>
    <input id="EquipmentHours" class="form-control required text-box single-line" type="text" value="" name="EquipmentHours" maxlength="5">
  </div>
  <div class="form-group col-sm-4">
    <br><button class="btn btn-dark btn-lg" type="submit">Submit</button>
  </div>
  <div class="clearfix"></div>
</form>
<hr>
<h3>Equipment Hours for this job:</h3>
<dl class="widelist">
  <dt id="de3e5768-612e-43e8-a6a4-cce6060e66c7">Articulated Rock Truck</dt><dd class="hovershow">100<a class="glyphicon glyphicon-remove" title="Delete Machine Entry" href="/HEO/DeleteEquipment/de3e5768-612e-43e8-a6a4-cce6060e66c7"> </a></dd>
  <dt id="6de52fd3-2b7e-4680-8db5-af8c1bf74b55">Dozer </dt><dd class="hovershow">500<a class="glyphicon glyphicon-remove" title="Delete Machine Entry" href="/HEO/DeleteEquipment/6de52fd3-2b7e-4680-8db5-af8c1bf74b55"> </a></dd>
</dl>

正如你在上面所看到的那样，因为这两个＆＃34;铰接式摇滚卡车＆＃34;和＃34;推土机＆＃34;在页面上，完全在form下面，我希望他们在选择列表中的条目设置为＆＃34;禁用＆＃34;自动在页面上加载JavaScript。我不希望这两个选择列表条目消失 - 我只希望它们被禁用，因此无法再次为其他表单提交选择它们。

Answer 1

这应该做的工作：

$('#EquipmentId option').each(function(key,val){
    $(val).prop("disabled",$('#'+val.value).length);
})

这是一个有效的example

aDisable选择列表项基于页面

1 个答案: