Question

我遇到以下jQuery代码的问题：

我有3个按钮，这是代码：

<button class="btn btn-lg btn-primary" id="valider" data-actionname="appliquer" disabled>ok</button>

<button class="btn btn-lg btn-primary" id="choisir" data-actionname="choose" disabled>choisir</button>

<button id="add" data-actionname="ajouteritems" class="btn btn-lg btn-primary">Ajouter</button>

我希望当我点击ajouter项目时按钮choisir变为活动状态，当我点击choisir时，按钮ok变为活动状态这里是我现在的js代码：

var boutton = function(bouton) {
    $('#add').click(function() {
        $('#choisir').removeAttr('disabled');
    });
}

感谢它不再重装但是它没有激活choisir按钮你知道为什么吗？是否可以理解告诉我，如果没有感谢。

Answer 1

您可以将点击事件绑定到button标记并使用以下jquery激活其上一个按钮：

$('button').click(function(){
   var $prevButton = $(this).prev('button');
   // check if previous button available
   if($prevButton.length > 0)
     $prevButton.removeAttr('disabled');
});

<强> Demo

并将type="button"作为chriz说

<button type = "button" class="btn btn-lg btn-primary" id="valider" data-actionname="appliquer" disabled>ok</button>

<button type = "button" class="btn btn-lg btn-primary" id="choisir" data-actionname="choose" disabled>choisir</button>

<button type = "button" id="add" data-actionname="ajouteritems" class="btn btn-lg btn-primary">Ajouter</button>

Answer 2

使用preventDefault()对事件进行重新加载（由按钮提交引起）：

var boutton = function(bouton) {
    $('#add').click(function(e) {
        e.preventDefault();
        $('#choisir').removeAttr('disabled');
    });
}

jQuery API reference event.preventDefault()

Answer 3

将type = button添加到您的按钮，如下所示，因为按钮的默认类型为submit

<button type = "button" class="btn btn-lg btn-primary" id="valider" data-actionname="appliquer" disabled>ok</button>

<button type = "button" class="btn btn-lg btn-primary" id="choisir" data-actionname="choose" disabled>choisir</button>

<button type = "button" id="add" data-actionname="ajouteritems" class="btn btn-lg btn-primary">Ajouter</button>

你需要像boutton();

那样调用你的函数

var boutton = function(bouton) {
    $('#add').click(function() {
        $('#choisir').removeAttr('disabled');
    });
}
boutton();

或只是使用此代码

 $('#add').click(function() {
        $('#choisir').removeAttr('disabled');
 });

Answer 4

以下是您的解决方案：

var boutton = function(bouton) {
    $('#add').click(function(e) {
        $('#choisir').removeAttr('disabled');
        e.preventDefault();
    });
    $('#choisir').click(function(e) {
        $('#valider').removeAttr('disabled');
        e.preventDefault();
    });
}

boutton(); // You need this to initialize the function 
           // Otherwise, it will not work

这是 demo

Answer 5

$(document).ready(function(){
 //by default am making the two buttons disbled(choisir & ok)
 $("#valider,#choisir").attr('disabled','disabled');
 //when clicking on the Ajouter 
   $("#add").click(function(){
       $("#choisir").removeAttr('disabled');    
     });
$("#choisir").click(function(){
    $("#valider").removeAttr('disabled');   
});

}）;

Answer 6

如果您已将按钮放在表单中，则可以尝试使用：

var boutton = function(e, el) {
   if($(el).prop('id') === 'add'){
      $('#choisir').prop('disabled', false);
   }else if($(el).prop('id') === 'choisir'){
      $('#valider').prop('disabled', false);
   }
}

$('button').click(function(e) {
    e.preventDefault();
    boutton(e, this);
});

Fiddle in action

Answer 7

我想我需要输入＆＃39; type =＆＃34; button＆＃34;＆＃39;在按钮上

<button type="button" yclass="btn btn-lg btn-primary" id="valider" data-actionname="appliquer" disabled>ok</button>


<button type="button" class="btn btn-lg btn-primary" id="choisir" data-actionname="choose" disabled>choisir</button>


<button type="button" id="add" data-actionname="ajouteritems" class="btn btn-lg btn-primary">Ajouter</button>

JS：

$('#add').click(function() {
    $('#choisir').removeAttr('disabled');
});

$('#choisir').click(function() {
    $('#valider').removeAttr('disabled');
});

这是小提琴sample

jquery按钮主动停止状态

7 个答案:

Fiddle in action