1

Есть код

var checks = document.querySelectorAll(".check");
var max = 3;
var max2 = 1;
for (var i = 0; i < checks.length; i++)
    checks[i].onclick = selectiveCheck;

function selectiveCheck(event) {
    var checkedChecks = document.querySelectorAll(".check:checked");
    if (checkedChecks.length >= max + 1)
        return false; {
        en_dis = $("input:checkbox:checked").length < max
        $('#submit_button').prop('disabled', en_dis);
    }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="nav-link" id="1tab" data-toggle="tab" href="#" role="tab" aria-controls="1tab" aria-selected="true">1Tab</a>

<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />


<button type="submit" id="submit_button" class="btn btn-primary btn-lg btn-block">Button</button>

К ссылке <a class="nav-link" добавить disabled, чтобы было <a class="nav-link disabled", если нажат хотя быт один checkbox.

2
  • Извиняюсь, исправил
    – Andrey Z.
    12 авг 2019 в 5:05
  • к этому <a class="nav-link" добавить disabled, чтобы было <a class="nav-link disabled"
    – Andrey Z.
    12 авг 2019 в 5:10

2 ответа 2

3

Попробуйте такой вариант, и если используете jquery, то я бы написал весь кусок на jquery, как ни крути, но селекторы на нём удобные:

$(document).on('click', '.check', function() {
  var isDisabled = false
  $.each($('.check'), function(key, value) {
    if ($(value).prop("checked") && !isDisabled) {
      isDisabled = true
    }
  })
  if (isDisabled) {
    $('#submit_button').prop('disabled', true);
    $('.nav-link').addClass('disabled');
  } else {
    $('#submit_button').prop('disabled', false);
    $('.nav-link').removeClass('disabled');
  }
})
.nav-link.disabled {
 color: #cccccc;
 cursor: not-allowed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a class="nav-link" id="1tab" data-toggle="tab" href="#" role="tab" aria-controls="1tab" aria-selected="true">1Tab</a>

<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />
<input type="checkbox" class="check" price="296" id="box_1" value="1" />


<button type="submit" id="submit_button" class="btn btn-primary btn-lg btn-block">Button</button>

2

На странице не должно быть больше одного элемента с одинаковыми id... Клик можно организовать по классам. Без jQuery:

var demo = document.getElementById('demo');

var checks = document.querySelectorAll(".check");
var tab = document.getElementById("tab1");
var btn = document.getElementById("submit_button");
var min = 1, max = 3;

for (var i = 0; i < checks.length; i++){
  checks[i].addEventListener('click', function (e){
    var ch = document.querySelectorAll('.check:checked');

    if( ch.length > max ) {
      demo.innerText = `Максимум ${ max }!`;
      e.preventDefault();
    } else { 
      demo.innerText = "";
    }

    tab.classList[ (ch.length >= min) ? "add" : "remove" ]("disabled");
    btn.disabled = ch.length < max;
  });
}
.disabled {
  color: #999;
  opacity: 0.7;
  pointer-events: none;
}
<a class="nav-link" id="tab1" data-toggle="tab" href="#" role="tab" aria-controls="1tab" aria-selected="true">1Tab</a>

<input type="checkbox" class="check" price="296" value="1" />
<input type="checkbox" class="check" price="296" value="1" />
<input type="checkbox" class="check" price="296" value="1" />
<input type="checkbox" class="check" price="296" value="1" />
<input type="checkbox" class="check" price="296" value="1" />

<button type="submit" id="submit_button" class="btn btn-primary btn-lg btn-block" disabled>Button</button>

<p id="demo"></p>

2
  • еще вопрос, как можно ограничить еще количество чеков, например 3
    – Andrey Z.
    12 авг 2019 в 6:48
  • @Andrey Z. event.preventDefault() выключает дефолтное поведение элемента для этого события. Но т.к. "change" нельзя отключить, поменял его на "click". Можно было просто if( ch.length > max ) { e.preventDefault(); } остальное для демо. 12 авг 2019 в 7:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.