jQuery Select Options not being disabled

I have 3 select's on my view. If the value of the first select equals "", then I want the second and third select's options to all be disabled. I am using $.getJSON to properly show which options I want dynamically.

Here is my code:

$.getJSON(myUrl,
    { myId: myId },
    function(response) {
        console.log(response);
        secondSelect.empty();
        secondSelect.append("<option value=''>-- Select Option --</option>");
        if (response.length !== 0) {
            if (myId === "") {

                /* 
                   ***********************************
                   This is where my code doesn't work!
                   ***********************************
                */
                $("#Third-Select option").each(function () {
                    console.log('test');
                    $(this).prop('disabled', true);
                });

                /* 
                   ***********************************
                   ***********************************
                   ***********************************
                */

                $.each(response,
                    function(index, item) {
                        secondSelect
                            .append("<option value='" +
                                item.ResponseId +
                                "' disabled='disabled'>" +
                                item.TextValue +
                                "</option>");

                    });
            }

In the code above I left a comment where my code doesn't work. I shouldn't say it doesn't work, but rather partially works. It is executing the .each and the console is getting test for however many options are in the select, but the options are not being disabled! The section underneath the comment is working perfectly.

How do I get the options in the 3rd select to disable if the myId variable equals ""?

1 answer

  • answered 2018-01-11 20:09 Ezekiel

       $("#Third-Select").each(function () {
             console.log('test');
            $(this).pro('disabled', true);
        });
    

    Do something like This instead.