javascript - 单击按钮后,无法禁用另一个按钮

标签 javascript jquery css button

所以我有 2 个按钮(接受、拒绝),它们都显示与另一个按钮相关的 div。

当单击第三个按钮(用于接受)时,我想在单击“接受”滑入“接受”表单,然后单击“发送接受”按钮后禁用第二个(拒绝)。

  • 点击“接受”
  • 点击“发送接受”
  • “Box Deny”按钮应该不再起作用

enter image description here

在您单击“发送接受”后,我删除了用于拒绝的类选项,但该操作仍然保留,并且“拒绝”按钮仍然有效:(

我的代码笔: http://codepen.io/leongaban/pen/hKDIJ

HTML

<div id="accept" class="option btn_accept">
  Accept
</div>

<div id="deny" class="option btn_deny">
  Deny
</div>

<div id="accept_msg">
<form id="accept_form">
  <textarea name="" id="" cols="30" rows="2">ACCEPT! textarea</textarea>
  <button id="send_accept">SEND ACCEPT</button>
</form>
</div>

<div id="deny_msg">
<form id="deny_form">
  <textarea name="" id="" cols="30" rows="2">DENY! textarea</textarea>
  <button id="send_deny">SEND DENY</button>
</form>
</div>

jQuery

$('.option').unbind('click').bind("click", function() {

  var user_choice = $(this).attr('id');

  // IF ACCEPT
  if (user_choice === 'accept') {
    $('#accept_msg').slideDown('fast', function() {});
    $('#deny_msg').slideUp('fast', function() {});
    $('.btn_accept').css('background', 'orange');
    $('.btn_deny').css('background', '#ccc');
  // IF DENY
  } else if (user_choice === 'deny') {
    $('#accept_msg').slideUp('fast', function() {});
    $('#deny_msg').slideDown('fast', function() {});
    $('.btn_deny').css('background', 'blue');
    $('.btn_accept').css('background', '#ccc');
  }

});

$('#accept_form').unbind('submit').bind("submit", function() {
  var btn_send_accept = $('#send_accept');
  var btn_deny = $('#deny');

  $(btn_send_accept).css('cursor','auto');
  $(btn_send_accept).css('background','#ccc');
  $(btn_send_accept).text('Sending...');
  $(btn_send_accept).attr("disabled", "disabled");

  $(btn_deny).removeClass('option');
  $(btn_deny).removeClass('btn_deny');
  $(btn_deny).addClass('btn-disabled');
});

有什么想法/提示吗?

最佳答案

使用.off()禁用点击事件处理程序:

$(btn_deny).off("click");

关于javascript - 单击按钮后,无法禁用另一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18703657/

相关文章:

javascript - 微数据的 tinymce extended_valid_elements

javascript - 图片尺寸限制

javascript - Jquery 函数处理程序复杂

javascript - 通过 AJAX 的跨源资源共享 (CORS)

html - 当宽度不变时,根据窗口高度使图像响应

javascript - 使用 .each 的 Jquery 搜索过滤器

javascript - 如何从数字数组输出字母数组

javascript - 如何在此 React 应用程序中设置编辑项目功能?

css - 使用 Meteor 数据 Bootstrap 多列

javascript - HTML/CSS/JS - 如何使用 setInterval 更改文本?