jQuery：无法禁用Ajax响应的元素

Question

I have a dynamic dialogue box created by a Ajax return. I need the the drop list element $('#functionSelect') within the box to change the disability of the input fields if its changes. below is my code:

$.ajax({
    type: "POST",
    async: false,
    url: "app_processor.php",
    data: {action: "updateCriteriaParameter", criteriaid: criteriaid},
    success: function (msg) {
        //alert(msg);
        if (msg !== 0)
        {
            $(".dialogDiv").html(msg);
        }
    }
});

$(document).on('change', '#functionSelect', function () {
   functionSelect = $(this).val();
   switch (functionSelect) {
    case 0:
        {
            $('#selectPThrehold').attr('disabled', 'disabled');
            $('#selectIThrehold').attr('disabled', 'disabled');

        }
        break;
    case 1:
        {
            $('#selectPThrehold').attr('disabled', 'disabled');
        }
        break;
    case 2:
        {
            $('#selectIThrehold').attr('disabled', 'disabled');
        }
        break;
    case 5:
        {
           $('#selectIThrehold').attr('disabled', 'disabled');
        }
        break;
}    
});

However I can't seem to be able to disable other element such as $('#selectPThrehold')

Do anyone have an idea on how i can do this.

Answer 1

try this

$( document ).ajaxComplete(function() {
  $("#functionSelect").change(function () {
    $('#selectPThrehold').prop('disabled', true);
  });
});

Answer 2

         $.ajax({
            type: "POST",
            async: false,
            url: "app_processor.php",
            data: {action: "updateCriteriaParameter", criteriaid: criteriaid},
            success: function (msg) {
                //alert(msg);
                if (msg !== 0) {
                    $(".dialogDiv").html(msg);
                    $(".dialogDiv").find('#functionSelect').change(function () {
                        var functionSelect = $(this).val();
                        $('#selectPThrehold').attr('disabled', 'disabled');
                    });
                }
            }
        });

Try this

Answer 3

$(document).on('ajax:success', 'body', function (event, xhr, settings) {
   functionSelect = $(this).val();
   $('#selectPThrehold').attr('disabled', 'disabled');      
});

Use ajax:success , this code will be ejecuted when body fires an Ajax query and it returns a success, if ajax query is fired by another link or object put the correct one.

Answer 4

I found the solution. I had to use the find() method to get the ajax return descendant element and it worked. I have not idea why i couldn't do it directly.

$(document).on('change', '#functionSelect', function () {
  functionSelect = $(this).val();
  $(".dialogDiv").find('#selectPThrehold').removeAttr('disabled');
  $(".dialogDiv").find('#selectIThrehold').removeAttr('disabled');
  if (functionSelect == 0)
  {
    $(".dialogDiv").find('#selectPThrehold').attr('disabled', 'disabled');
    $(".dialogDiv").find('#selectIThrehold').attr('disabled', 'disabled');
  }
  else if (functionSelect == 1)
    $(".dialogDiv").find('#selectPThrehold').attr('disabled', 'disabled');
  else if (functionSelect == 2)
    $(".dialogDiv").find('#selectIThrehold').attr('disabled', 'disabled');
  else if (functionSelect == 5)
    $(".dialogDiv").find('#selectIThrehold').attr('disabled', 'disabled');

});

thank you.