René Kåbis René Kåbis - 5 months ago 14
jQuery Question

aDisable Select List Items based on existence of ID in page

So I happen to have a form where the user selects an item from the select list, and adds it to the page by submitting the form. Both form and the resulting list of items are on the same page, so the list of items can include the primary key of the item that had been added as an ID in the tag surrounding the item that had been added.

I want to be able to disable the entry in the select list of any item previously added to the page. My JavaScript is such:

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


The select list (#EquipmentId) is a list of machines, where the Value is the primary key of the machine as a Guid. When the list of selected machines are written to the page, they are in a list where the list items have the Guid of the machine as their ID (
<li id="[Guid]">Equipment</li>
).

Unfortunately, right now the entries in the select list are not being properly disabled, even though there are several machines that have been selected. Even though the IDs are on the page, the JavaScript doesn't seem to be disabling the corresponding entries in the select list so the machine cannot be added to the page twice.

Suggestions?




EDIT: I think people are getting confused as to what I am looking for and what I need to modify.

The select list is the
#EquipmentId
. It exists only once. It provides a list of machines, with the primary key Guid as the Value and the name of the machine as the text. The user can add a machine by selecting it and submitting the form. Once a machine is added to the page, it shows up in the HTML as
<li id="[Guid]">Equipment</li>
, with the Guid being its Value in the select list. I need the JavaScript to see if, for each item in the Select List, there exists an ID on the page with its Value. If there does exist such an ID, disable that specific entry in the Select List.

This will prevent the same machine from being added to the page more than once, and ensures that any one Guid exists as an ID only once on the page (if it exists at all).




Edit 2: Here is my raw 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>


As you can see above, since both "Articulated Rock Truck" and "Dozer" are present on the page, below the
form
entirely, I want their entries in the Select List to be set to "disabled" automatically on page load by the JavaScript. I don’t want those two Select List entries to vanish -- I only want them disabled, so they cannot be selected again for another form submission.

Answer

This should do the work:

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

Here is a working example