Question

我想在点击按钮时禁用按钮，并使用AJAX启用另一个按钮。

这是喜欢和不喜欢按钮的脚本：

function like(id,type,target){
    $.ajax({
        //condition for like and unlike button
        $('button').click(function like() {
            var classname = $(this).attr('id');

            if(classname == 'positive')
            { 
                $('button.positive').attr('disabled', 'disabled');
                $('button.negative').attr('disabled', false);
            }
            else
            {
                $('button.negative').attr('disabled', 'disabled');
                $('button.positive').attr('disabled', false);
            }
        }

        //like unlike for mysql database
        type:'POST',
        url:'ratinglike.php',
        data:'id='+id+'&type='+type,
        success:function(msg){
            if(msg == 'err'){
                alert('Some problem occured, please try again.');
            }else{
                $('#'+target).html(msg);
            }
        });
    });
}

用于喜欢和不同按钮的HTML：

<!-- Like Icon HTML -->
<!-- the php condition inside works but i need to refresh the page before i see its disabled -->
<button class="fa fa-thumbs-up" id = "positive" <?php if($userlike == 1){?>disabled<?php } ?>  onClick="like(<?php echo $trow['id']; ?>,1,'like_count<?php echo $trow['id']; ?>')"></button>&nbsp;

<!-- Like Counter -->
<span class="counter" id="like_count<?php echo $trow['id']; ?>"><?php echo $trow['like_num']; ?></span>&nbsp;&nbsp;
<button class="fa fa-thumbs-down" id="negative" <?php if($userdislike == 1){?>disabled<?php } ?> onClick="like(<?php echo $trow['id']; ?>,0,'dislike_count<?php echo $trow['id']; ?>')" ></button>&nbsp;

<!-- Like Counter -->
<span class="counter" id="dislike_count<?php echo $trow['id']; ?>"><?php echo $trow['dislike_num']; ?></span>&nbsp;&nbsp;

有人可以帮助我吗？

Answer 1

    You can use a css class for it :
    If it is a link means <a> tag then you can use the following css class
    .disabled {
            pointer-events: none;
        }

    and you can add class or remove class on event as
    $("a").addClass('disabled') // you should use button id here
    or
    $("a").removeClass('disabled') // you should use button id here
    if it is button then you can use disabled property of the input tag like
    $("#button1").prop('disabled','disabled')
    or
    $("button2").removeProp('disabled')

I am giving you an example:
$("#button1").on('click',function(){
 $("#button1").prop('disabled','disabled');
 $("#button2").removeProp('disabled')
});
//and same for button2

Answer 2

您可以使用解决方案https://jsfiddle.net/g1Lkzhks/2/

$('button').click(function() {

  if( $(this).attr('id') === 'positive'){ 
      $('button#positive').prop('disabled', 'disabled');
      $('button#negative').prop('disabled', false);
  } else {
      $('button#negative').prop('disabled', 'disabled');
      $('button#positive').prop('disabled', false);
  }
  
   $.ajax({
    //like unlike for mysql database
    type:'POST',
    url:'ratinglike.php',
    data:'id='+id+'&type='+type,
    success:function(msg){
        if(msg == 'err'){
            alert('Some problem occured, please try again.');
        }else{
            $('#'+target).html(msg);
        }
  	}
	});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<button type="submit" class="fa fa-thumbs-up" id="positive"></button>
<span class="counter" id="like_count"></span>

<button type="submit" class="fa fa-thumbs-down" id="negative"></button>
<span class="counter" id="dislike_count"></span>

更新版本https://jsfiddle.net/g1Lkzhks/3/

$('button').click(function() {
   $(this).prop('disabled', 'disabled').siblings('button').prop('disabled', false);
 
   $.ajax({
    //like unlike for mysql database
    type:'POST',
    url:'ratinglike.php',
    data:'id=' + $(this).attr('id') + '&type=' + type,
    success:function(msg){
        if(msg == 'err'){
            alert('Some problem occured, please try again.');
        }else{
            $('#'+target).html(msg);
        }
  	}
	});
  
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="fa fa-thumbs-up" id="positive"></button>
<span class="counter" id="like_count"></span>

<button type="submit" class="fa fa-thumbs-down" id="negative"></button>
<span class="counter" id="dislike_count"></span>

我已从HTML中删除了您的PHP代码，请将其添加回来。

Answer 3

您可以尝试这个工作样本。请修改以满足您的需求。

//script for like and dislike button
function like(btn, id, type) {

  var button = $(btn);

  // disable button so it cant be click again
  button.prop('disabled', true);

  $.ajax({
    //like unlike for mysql database
    type: 'POST',
    url: 'ratinglike.php',
    data: 'id=' + id + '&type=' + type,
    success: function(msg) {
      if (msg == 'err') {
        alert('Some problem occured, please try again.');
      } else {        
        var otherButton = button.siblings('button');

        button.prop('disabled', true);
        otherButton.prop('disabled', false);        
        
        // update counters
        updateCounter(button, 1);
        updateCounter(otherButton, -1);
      }
    },
    error: function(xhr, error) {
      button.prop('disabled', false);
    }
  });

}

function updateCounter(btn, value) {
   var counter = btn.next('.counter');
   var newCount = Math.max(0, parseInt(counter.text()) + value);
   
   counter.text(newCount);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Like Icon HTML -->
<button class="fa fa-thumbs-up" onClick="like(this, 10, 1)">Like</button>&nbsp;
<!-- Like Counter -->
<span class="counter">0</span>&nbsp;&nbsp;
<button class="fa fa-thumbs-down" onClick="like(this, 10, 0)">DisLike</button>&nbsp;
<!-- Like Counter -->
<span class="counter">0</span>&nbsp;&nbsp;

如何在单击时禁用按钮并使用ajax启用另一个按钮

3 个答案: