How to disable a selected option if is selected already with a same name input fields?

Question

I am working in my website http://openacessjournal.com One thing is that the first input field is static after that second and third input field is created by jQuery, When I am trying to using onchange() function, the function is working for only first static input fields, not for all.

My code is as below:

$(document).ready(function() {
  $("select[name='author_number[]']").each(function() {
    $(this).change(function() {

      alert($(this).val());

      var selected = $("option:selected", $(this)).val();
      var thisID = $(this).prop("id");
      $("select[name='author_number[]'] option").each(function() {
        $(this).prop("disabled", false);
      });

      $("select[name='author_number[]']").each(function() {
        if ($(this).prop("id") == thisID) {
          $("option[value='" + selected + "']", $(this)).prop("disabled", true);
        }
      });

    });
  });
});

Maybe have a look at this: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements - you can actually tell jQuery to bind elements as they get added to the page in the future. Maybe that helps. — somethinghere, Dec 03 '19 at 21:26

score 0 · Answer 1 · answered Dec 02 '19 at 11:04

If you're dynamically creating 2 input (or more) fields, they need to be binded since they were not in the DOM on initial page load ($(document).ready()).

$(document).ready(function() {
    $('body').on('change', 'select[name="author_number[]"]', function() {
        alert($(this).val());

        var selected = $("option:selected", $(this)).val();
        var thisID = $(this).prop("id");

        $("select[name='author_number[]'] option").each(function() {
            $(this).prop("disabled", false);
        });

        $("select[name='author_number[]']").each(function() {
            if ($(this).prop("id") == thisID) {
                $("option[value='" + selected + "']", $(this)).prop("disabled", true);
            }
        });
    });
});

How to disable a selected option if is selected already with a same name input fields?

1 Answers1