Disable an element with javascript does not work

Question

I have the following code which should disable an element if the sizes match. However, the line "sizes[i].disabled = true;" does not work.

<div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div class="productsize">
                <div id="radio-container"></div>
                @foreach (var size in Model.AvailableSizes)
                {
                    <input type="radio" name="sizes" id="@size" class="radio-button" value="@size" />
                    <label for="@size" class="radio-label">@size</label>
                }
                <script>
                    function displaySizes(productSizes) {
                        var valueProductSizes = productSizes.value;
                        var sizes = document.getElementsByName('sizes');

                        for (var i = 0; i < sizes.length; i++) {
                            if (!valueProductSizes.includes(sizes[i].value)) {
                                console.log(sizes[i].value);
                                sizes[i].disabled = true;
                            }
                        }
                    }
                </script>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>

The method call is made in another foreach.

@foreach (var product in Model.Products)
                        {
                            @if (Model.SelectedProductId != null && product.Id == Model.SelectedProductId)
                            {
                                <input checked type="radio" name="products" id="@product.Name" class="radio-button" value="@string.Join( " ,", product.Sizes)" onchange="displaySizes(this)" />
                            }
                            else
                            {
                                <input type="radio" name="products" id="@product.Name" class="radio-button" value="@string.Join( " ,", product.Sizes)" onchange="displaySizes(this)" />
                            }
                            <label for="@product.Name" class="radio-label">@product.Name</label>
                        }

The goal of the program is to compare the sizes that are fetched when the method is called via the input with the other sizes. As soon as the size is not available, the element is deactivated.

I have already debugged the program. One line above the deactivate also outputs the correct values, but deactivating the elements does not work.

Answer 1

Since your question did not contain any code I could run, I have re-created the basics here. See my below example. It seems to disable things when a product is selected, but I am not clear on what you want it to do differently.

function displaySizes(productSizes) {
    var valueProductSizes = productSizes.value;
    var sizes = document.getElementsByName('sizes');

    for (var i = 0; i < sizes.length; i++) {
        if (!valueProductSizes.includes(sizes[i].value)) {
            console.log(sizes[i].value);
            sizes[i].disabled = true;
        }
    }
}

<input type="radio" name="products" id="product-a" class="radio-button" value="one, two, three" onchange="displaySizes(this)" />
<label for="product-a" class="radio-label">Product A</label>
<br/>

<input type="radio" name="sizes" id="one" class="radio-button" value="one" />
<label for="one" class="radio-label">one</label>

<input type="radio" name="sizes" id="two" class="radio-button" value="two" />
<label for="two" class="radio-label">two</label>

<input type="radio" name="sizes" id="three" class="radio-button" value="three" />
<label for="three" class="radio-label">three</label>

<hr/>

<input type="radio" name="products" id="product-b" class="radio-button" value="four, five, six" onchange="displaySizes(this)" />
<label for="product-b" class="radio-label">Product B</label>
<br/>

<input type="radio" name="sizes" id="four" class="radio-button" value="four" />
<label for="four" class="radio-label">four</label>

<input type="radio" name="sizes" id="five" class="radio-button" value="five" />
<label for="five" class="radio-label">five</label>

<input type="radio" name="sizes" id="six" class="radio-button" value="six" />
<label for="six" class="radio-label">six</label>