JQuery：在某些选择选项上禁用按钮

I have form with dropdown list of collections. After selecting and submitting one of the collections I want to disable button. So that user cannot submit that collection option again. Ajax works well, and the button is disabled on success. However, after I scroll dropdown list, the button becomes enabled again.

Form

<form id="addToCollection">
<select id="collection_bundle_add_to_collection">
    <option value="0" selected="selected">Choose a collection</option>
    <option value="{{ id }}">{{ name }}</option>
</select>

<input  id="add-object-to-collection"
    type="submit" value="Add" class="button"/>

Submit Ajax

 $('#addToCollection').on('submit', function(event){
    event.preventDefault();
    $("#add-object-to-collection").val('Adding...');
    var url = '{{ path('collection_submit_object', {'id': '{{ id }}'}) }}';
    var data = $('#addToCollection').serialize();
    $.ajax({
        url: url,
        type : 'POST',
        data: data
    }).done(function( data ) {
        if (data.error){
            $('#addErrorMessage').css("display","inline");
        }
        else{
            $("#add-object-to-collection").val('Added');
            $("#add-object-to-collection").prop('disabled', true);
            $('#addErrorMessage').css("display","none");
        }
    });
});

Change Javascript checks if select option value is in col_exists array. col_exists is an array of submitted collections, if checks if the value of option is in this array. If yes, the button is disabled

  $("#collection_bundle_add_to_collection").change(function() {
      if (col_exists.indexOf($("#collection_bundle_add_to_collection").val()) >= 0) {
                $("#add-object-to-collection").prop('disabled', true);
                $("#add-object-to-collection").attr('value', 'Added');
                }
                else {
                $("#add-object-to-collection").prop('disabled', false);
                $("#add-object-to-collection").attr('value', 'Add');
                }
        });

In gif below you can see that I selected and submitted col1 first, and button has become disabled. When I selected col3 and went back to col1,the button for col1 is enabled again. This can make user to submit col1 again.

You dont appear to add the submited value to your col_exists array at any point, so the function attached to the selects change event always runs the else code branch, enabling the button.

To fix add the value to the array:

$('#addToCollection').on('submit', function(event){
    event.preventDefault();
    $("#add-object-to-collection").val('Adding...');
    var url = '{{ path('collection_submit_object', {'id': '{{ id }}'}) }}';
    var data = $('#addToCollection').serialize();
    var columnSelected = $("#collection_bundle_add_to_collection").val(); //get value
    $.ajax({
        url: url,
        type : 'POST',
        data: data
    }).done(function( data ) {
        if (data.error){
            $('#addErrorMessage').css("display","inline");
        }
        else{
            col_exists.push(columnSelected); //add to array
            $("#add-object-to-collection").val('Added');
            $("#add-object-to-collection").prop('disabled', true);
            $('#addErrorMessage').css("display","none");
        }
    });
});

This presumes that col_exists is an array, and is accessible in a parent scope

Instead of looking in the mysterious col_exists array, why not, on ajax success, simply disable the appropriate option.

$('#addToCollection').on('submit', function(event) {
    event.preventDefault();

    var $selectedOption = $("#collection_bundle_add_to_collection", this).find(':selected'); // <<< Remember the selected option at the moment the form is submitted.

    $("#add-object-to-collection").val('Adding...').prop('disabled', true);// <<< disable here to prevent another click while adding is in progress

    var url = '{{ path('collection_submit_object', {'id': '{{ id }}'}) }}';
    var data = $(this).serialize();// you can use $(this) here
    $.ajax({
        'url': url,
        'type': 'POST',
        'data': data
    }).done(function(data) {
        if (data.error) {
            $('#addErrorMessage').css('display', 'inline');
        } else {
            $selectedOption.prop('disabled', true);//<<< make sure the option cannot be reselected.
            $('#add-object-to-collection').val('Added');//<<< already disabled above, so no need to disable again
            $('#addErrorMessage').css('display', 'none');
        }
    });
});

Then, there's no need to test anything in the select menu's 'change' handler, though you still need to re-eneable the "add" button.

$("#collection_bundle_add_to_collection").change(function() {
    $("#add-object-to-collection").val('Add').prop('disabled', false);
});