jquery按钮处于活动取消活动状态

jquery button active desactive state

本文关键字：活动 取消 活动状态 按钮 于活动 jquery      更新时间：2023-09-26

我对以下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>

我希望当我点击一个外部项目时，按钮choisir变为活动，当我点击choisir时，按钮ok变为活动。这是我目前的js代码：

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

谢谢它不再重新加载，但它不会激活choisir按钮，你们知道为什么吗？如果不能，告诉我可以理解吗谢谢

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

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

演示

并将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>

在事件上使用preventDefault()可以防止重新加载(由按钮提交引起(，如下所示：

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

jQuery API引用事件.prventDefault((

这是您的解决方案：

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

这是演示

$(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');   
});

})；

如果你已经将按钮放在一个表单中，那么你可以尝试使用这个：

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);
});

小提琴演奏

将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');
 });

我想需要在按钮上加上"type="button">

<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');
});

这是小提琴样品

相关文章：