Question

我是jQuery新手。我希望选中单选按钮（https://smartune.nl/reparatie-melden）后，单击类pbNext的按钮仅一次。以下工作有效，但它使我进入了最后一步。所有下一个按钮都具有pbNext类。有人可以帮我吗？

 $(document).ready(function(){
 $("input[type=radio]").change(function(){
 $(".pbNext").click();
 });
 });

Answer 1

Occam的剃须刀可能会给出这样的答案：

$(document).ready(function(){
    var pbClicked = false;
    $("input[type=radio]").click(function(){
        if (!pbClicked){
            $(".pbNext").click();
            pbClicked = true;
        }
    });
});

演示：

$(document).ready(function(){
    var pbClicked = false;
    $("input[type=radio]").click(function(){
        var msg = (pbClicked) ? 'ignored' : 'clicked';
        if (!pbClicked){
            $(".pbNext").click();
            pbClicked = true;
        }
        $('#msg').html(msg);
    });
    
    $('.pbNext').click(function(){
      $(this).css('background','blue');
    });
});

#msg{position:fixed;right:15px;font-size:1.3rem;text-align:center;}
.pbNext{width:100px;height:40px;background:pink;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="msg"></div>

<input type="radio" />
<input type="radio" />
<input type="radio" />
<input type="radio" />

<div class="pbNext"></div>

如果要跟踪多个按钮，并且只希望用户只能单击一次每个按钮，则可以使用数组来跟踪被单击的按钮。如果将ID添加到每个要跟踪的元素，这将是最简单的。这是一个示例（请注意，第3个复选框已被明确允许切换，而其他3个复选框则受其在单击复选框的排列中的限制。）：

var tmp_id, arrClicked = []; //vars created outside fns that use them

$("input[type=checkbox]").click(function(){
    tmp_id = this.id.split('_')[1];
    if (arrClicked.indexOf(tmp_id) == -1){
        $(".pbNext").click();
        arrClicked.push(tmp_id);
    }
    
    else if(tmp_id == 3){ $('.pbNext').click(); }  //Allow id 3 to be re-clicked, just to show
    $('#msg').html(JSON.stringify(arrClicked));
    
});

$('.pbNext').click(function(){
  $('#cb_'+tmp_id).parent().toggleClass('a'+tmp_id);
});

#msg{position:fixed;right:15px;font-size:1.3rem;text-align:center;}

button{margin-top:15px;}
div{width:150px;padding:15px;border:1px solid #ccc;}

.a1{background:palegreen;}
.a2{background:lightpink;}
.a3{background:lightblue;}
.a4{background:palegoldenrod;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<aside id="msg"></aside>

<div><input type="checkbox" id="cb_1" /></div>
<div><input type="checkbox" id="cb_2" /></div>
<div><input type="checkbox" id="cb_3"/></div>
<div><input type="checkbox" id="cb_4" /></div>

<button class="pbNext">Does Nothing button</button>

jsFiddle version that you can play with

如何确保jquery在多步骤表单中仅选择一次“ next”按钮？

1 个答案: