Question

我有两个按钮，一个投票否，一个投票赞成，我需要在用户点击后禁用这两个按钮。我还想在点击的按钮上添加颜色：灰色。

到目前为止，我无法禁用单击但不是另一个。

到目前为止我的代码是：

html代码:(也在循环中运行，因此id上有增量）

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <a href="#" data-id="yes" data-problem_id="1" class="problem_vote">
            <button class="btn btn-no btn-vote">YES</button>
        </a>
    </div>  
    <div class="btn-group"> 
        <a href="#" data-id="no" data-problem_id="2" class="problem_vote">
             <button class="btn btn-no btn-vote">NO</button>
        </a>
    </div>  
</div>

到目前为止我有这个jQuery代码：

$('.problem_vote').on('click touchstart', function(e){

 e.preventDefault();
 var link = this;

 $(link).prev('.btn-group-justified').find('a').attr('disabled','disabled');
 $(link).find('button').css('background-color','grey');

});

Answer 1

如果要同时禁用两者，请执行以下操作：

$('.problem_vote').on('click', function(e) {
    $(this).find("button").css('background-color', 'grey');
    $(this).closest(".btn-group-justified").find("a").attr('disabled', 'disabled');
});

Answer 2

＆＃13;

$('button.btn-vote').click(function() {
  var action = $(this).parent().data('id');
  var tmp = $(this).parents('div.btn-group-justified')[0]
  $(tmp).find('button').prop('disabled', true);
  $(this).css('background-color', 'grey');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
POST 1:
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <a href="#" data-id="yes" data-problem_id="1" class="problem_vote">
      <button class="btn btn-no btn-vote">YES</button>
    </a>
  </div>
  <div class="btn-group">
    <a href="#" data-id="no" data-problem_id="2" class="problem_vote">
      <button class="btn btn-no btn-vote">NO</button>
    </a>
  </div>
</div>
<br />------------------------
<br />
<br />POST 2:
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <a href="#" data-id="yes" data-problem_id="1" class="problem_vote">
      <button class="btn btn-no btn-vote">YES</button>
    </a>
  </div>
  <div class="btn-group">
    <a href="#" data-id="no" data-problem_id="2" class="problem_vote">
      <button class="btn btn-no btn-vote">NO</button>
    </a>
  </div>
</div>

＆＃13;

Answer 3

您可以使用以下代码：

＆＃13;

$('.problem_vote').on('click touchstart', function(e) {

  e.preventDefault();
  var problemVote = $('.problem_vote button');
  //disabled both button
  problemVote.prop('disabled', true);
  //add class with background color to the clicked element
  $('button', this).addClass('disabled');
});

＆＃13;

.disabled {
  background-color: rgba(96, 96, 96, 0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <a href="#" data-id="yes" data-problem_id="1" class="problem_vote">
      <button class="btn btn-no btn-vote">YES</button>
    </a>
  </div>
  <div class="btn-group">
    <a href="#" data-id="no" data-problem_id="2" class="problem_vote">
      <button class="btn btn-no btn-vote">NO</button>
    </a>
  </div>
</div>

＆＃13;

如何找到特定类，并找到一个特定元素并添加禁用attr

3 个答案: