Как я могу убедиться, что jquery выбирает кнопку «Далее» только один раз в многошаговой форме?

Question

Я новичок в jQuery.Я хочу, чтобы кнопка с классом pbNext щелкала ТОЛЬКО ОДИН РАЗ , когда отмечена кнопка-переключатель (https://smartune.nl/reparatie-melden). Следующее работает, но подводит меня к последнему шагу. Все последующие кнопки имеют класс pbNext.Может кто-нибудь помочь мне с этим?

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

Answer 1

Бритва Оккама может предложить такой ответ:

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

DEMO:

$(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>

---

Если у вас есть несколько кнопок для отслеживания, и вы хотите, чтобы пользователь мог нажимать каждую кнопку только один раз, тогда вы можетеиспользуйте массив для отслеживания нажатых кнопок.Будет проще, если вы добавите идентификатор для каждого отслеживаемого элемента.Вот пример ( Обратите внимание, что 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 версия, в которую вы можете играть с