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

【问题标题】：JQuery: disable button on certain select optionJQuery：在某些选择选项上禁用按钮
【发布时间】：2016-02-25 13:03:01
【问题描述】：

我有一个带有集合下拉列表的表单。选择并提交其中一个集合后，我想禁用按钮。因此该用户无法再次提交该收集选项。 Ajax 运行良好，并且按钮在成功时被禁用。但是，在我滚动下拉列表后，该按钮会再次启用。

表格

<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"/>

提交 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 检查选择选项值是否在 col_exists 数组中。 col_exists 是一个提交集合的数组，if 检查 option 的值是否在这个数组中。如果是，则该按钮被禁用

  $("#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');
                }
        });

在下面的 gif 中你可以看到我首先选择并提交了 col1，并且按钮已被禁用。当我选择 col3 并返回 col1 时，col1 的按钮再次启用。这可以让用户再次提交 col1。

【问题讨论】：

下拉列表使用的组件是什么？你能创建一个演示问题的 plunkr 吗？
@GaneshKumar 添加了现场演示的 gif，希望它能解释问题
下拉组件是select。
selects onchange 事件附加了一些 javascript。请证明
哦，是不是第二次选择col1时它一直处于启用状态的问题？请显示您创建col_exists 变量的代码。

标签： javascript php jquery ajax symfony

【解决方案1】：

您似乎没有在任何时候将提交的值添加到您的 col_exists 数组中，因此附加到选择更改事件的函数始终运行 else 代码分支，从而启用按钮。

要修复将值添加到数组：

$('#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");
        }
    });
});

这假定col_exists 是一个数组，并且可以在父范围内访问

【讨论】：

col_exists 在另一个文件中声明，但无论如何感谢您的帮助。你展示了我的初始代码有什么问题

【解决方案2】：

与其查看神秘的col_exists 数组，不如在ajax 成功时禁用相应的选项。

$('#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');
        }
    });
});

然后，无需测试选择菜单的“更改”处理程序中的任何内容，但您仍需要重新启用“添加”按钮。

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

【讨论】：