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类，那么您将看不到它，并且您应该始终使用内置功能。</ p>

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

使用toggleClass

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（）接受回调。所以你可以利用这个优势。

单击另一个按钮将.prev（）按钮更改为禁用

4 个答案: