单击另一个按钮时将 .prev() 按钮更改为禁用

Question

我有两个按钮，我需要一个保持禁用状态，直到另一个按钮处于活动状态。然后，如果再次单击/切换第一个按钮，我需要使相同的按钮变为非活动状态并返回上一课。我只能访问 jQuery 1.7.2：

 <button class="primaryClass" value="primary"></button>
 <button class="linkClass" value="link"></button>

到目前为止，我尝试了这个，但它似乎不起作用：

$('.linkClass').on('click touchend',function() {
    if($(this).hasClass('linkClass')) {
        $(this).prev('.primaryClass').addClass('disabled');
        e.preventDefault;

    }
    if($(this).hasClass('linkClass-active')) {
        $(this).prev('.primaryClass').removeClass('disabled');

});

因此，基本上，用户单击带有 linkClass 的按钮，带有主类的按钮变为启用，因为禁用的类已被删除。如果用户再次单击它，则 primaryClass 按钮再次变为禁用状态。任何想法我做错了什么？

Answer 1

您的问题相当模糊，请尝试制作小提琴。据我所知，您应该设置.prop("disabled", true); 以禁用按钮。如果您没有 css .disabled 类，您将看不到它，您应该始终使用内置功能。

Answer 2

您可以使用disabled 属性禁用按钮，而不是添加类。这将防止单击按钮触发任何事件处理程序。

 $('.linkClass').on('click touchend',function() {
    var primary = $("button.primaryClass");
    primary.prop("disabled", !primary.is(":disabled"));
});

JS 小提琴： http://jsfiddle.net/6SNQS/2/

Answer 3

使用切换类

http://api.jquery.com/toggleclass/

$('.linkClass').on('click touchend',function() {

 $(this).prev('.primaryClass').toggleClass('disabled');
    e.preventDefault;
});

'linkClass-active' 的部分我不明白，所以我把它省略了。

如果您还想切换禁用的属性，请使用：

 $('.linkClass').on('click touchend',function() {
     var $target =  $(this).prev('.primaryClass');
     $target.toggleClass('disabled');
     $target[0].disabled = !$target[0].disabled;
     e.preventDefault;
});

小提琴：http://jsfiddle.net/Yyk2G/

顺便问一下，你为什么要设置值？它不是一个输入，它是一个按钮标签。

Answer 4

你的意思是这样DEMO：

html

   <button class="primaryClass" disabled="disabled" value="primary">Bye</button>
   <button class="linkClass" value="link">Hi</button>

js

$('.linkClass').on('click touchend',function() {
 $(this).prev().prop('disabled', function(idx, oldAttr) {
        return !oldAttr;
    });    
});

jQuery attr() 接受回调。所以你可以利用它来发挥你的优势。