0

Есть форма, которая представлена ниже. Элементы в ней формируются выбирая значения из базы. В целом это не особо важно, кроме того факта, что некоторые из радио кнопок уже отмечены как "checked", т.к они присутствуют в таблице.

Что я пытаюсь с делать с js'ом? Видите счетчик вверху? Там сейчас написано, что я могу выбрать 1 новость. Я её выбираю, счетчик показывает что я могу выбрать 0 новостей, я нажимаю на кнопку "сбросить" и ничего не происходит) по прежнему остается 0 новостей и выбрать ничего нельзя. Это происходит потому что у всех элементов установлено свойство disabled, но если я сброшу выбор или отменю его, кликнув по радио кнопке заново, то счетчик не обновится и выбрать какую то новость заново уже будет нельзя!

Как можно это исправить?

Сама форма ниже (лучше смотреть на весь экран).

var minCheckedButt = 0;
var maxCheckedButt = 4;

var countText = document.getElementById("countRadioButt");
var notifSpan = document.getElementById("notifSpan");
var disabledLabel = $(".markNews_label__custom");
var radioButtArr = $(".markNews");

var radioButtCheckNum = document.querySelectorAll(".markNews:checked").length;

countText.innerHTML = maxCheckedButt - radioButtCheckNum;
switchOnChange(Number(countText.innerHTML));
radioButtArr.each(function(key, value) {
  $(this).change(function() {
    if (radioButtCheckNum < maxCheckedButt) {
      radioButtCheckNum = document.querySelectorAll(".markNews:checked").length;
      countText.innerHTML = maxCheckedButt - radioButtCheckNum;
      switchOnChange(Number(countText.innerHTML));
    } else {
      radioButtArr.each(function(key, value) {
        value.setAttribute("disabled", "disabled");
      });
      radioButtCheckNum = document.querySelectorAll(".markNews:checked").length;
    }
  });
});

function switchOnChange(arrg) {
  switch (arrg) {
    case 0:
      notifSpan.innerHTML = " новостей";
      break;
    case 1:
      notifSpan.innerHTML = " новость";
      break;
    case 2:
      notifSpan.innerHTML = " новости";
      break;
    case 3:
      notifSpan.innerHTML = " новости";
      break;
    case 4:
      notifSpan.innerHTML = " новости";
      break;
    default:
      notifSpan.innerHTML = " новостей";
  }
}
.ThisDay-default-index {
  position: relative;
}

.control-group .group-header:not(:nth-child(1)) {
  display: none;
}

.horizontal-scroll-wrapper {
  width: 100%;
}

.control-group {
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  width: auto;
  height: auto;
  margin: 10px;
  max-width: 285px;
  max-height: 345px;
  min-height: 345px;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: normal;
}

.thisday-container {
  width: 55%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin: 10px auto;
}

.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 4px;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}

.control--radio .control__indicator {
  border-radius: 50%;
}

.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
  background: #ccc;
}

.control input:checked~.control__indicator {
  background: #2aa1c0;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
  background: #0e647d;
}

.control input:disabled~.control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control__indicator:after {
  display: block;
}

.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}

.control--radio input:disabled~.control__indicator:after {
  background: #7b7b7b;
}

.control-views-count {
  position: relative;
  display: block;
  float: right;
  font-weight: 500;
  margin-right: 15px;
  margin-left: 15px;
  font: normal normal normal 13px/1 FontAwesome;
  line-height: 20px;
  color: #695454;
}

.control-views-count:before {
  margin: 4px;
}

.thisday-butt,
.thisday-btn {
  float: right;
}

.thisday-time {
  display: flex;
}

.thisday-content {
  clear: both;
}

.control-group .group-header:not(:nth-child(1)) h3 {
  display: none !important;
}

.control-button__container {
  text-align: center;
}

.thisday-list__button {
  float: left;
  margin-right: 20px;
}

.group-header {
  margin-left: 4px;
}

.thisday-time #userdate {
  margin-left: 5px;
  margin-right: 5px;
  width: 10%;
  text-align: center;
}

.bs-native-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.thisday-form-butt {
  margin-right: 20px;
}

.markNews {
  display: none;
  position: relative;
}

.markNews+.markNews_label__custom {
  background: #dad7d7;
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 0 0 0 0px;
  margin: 0 10px 0 5px;
  border-radius: 50%;
  position: relative;
}

.markNews:checked+.markNews_label__custom::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #58b790;
  height: 14px;
  width: 14px;
  display: inline-block;
  padding: 0 0 0 0px;
  border-radius: 50%;
}

.markNews_label__custom:hover {
  background: #cfe330;
  cursor: pointer;
}

.markNews-label {
  font-weight: 400;
  cursor: pointer;
}

.label-checked {
  background-color: #72f1638f;
}

.control-group__label:not(.label-checked):hover,
.control-group__label:not(.label-checked):focus {
  background-color: #9dd9f68f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="senderForm" class="thisday-content" action="/edit" method="post" data-pjax="1">
  <input type="hidden" name="_csrf" value="rjCmfkMlqVdNvBQfS-o8pZ9hs__jEMudiG_0MYzSMvLvUcwWKWOEMn74Q08Emg3R7xnDuaV6kuX9NbhJu-ZXhw==">
  <div class="thisday-time"><span style="margin: 0 auto;">Вы можете выбрать еще <strong id="countRadioButt">1</strong><strong id="notifSpan"> новость</strong> </span></div>
  <div class="thisday-container">
    <div class="horizontal-scroll-wrapper">
      <div class="control-group">
        <h3 class="group-header">2018</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-688204" style="width: 10%; float: left;" name="News[2018][]" value=" 688204" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-688204" class="markNews_label__custom">  </label>
        <span class="markNews-label">"Должны есть грязь и отказаться быть человеком" – рабочий из КНДР во Владивостоке </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">16808                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2018</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-688251" style="width: 10%; float: left;" name="News[2018][]" value=" 688251" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-688251" class="markNews_label__custom">  </label>
        <span class="markNews-label">Новым главой фонда капремонта Приморья стал Александр Коваль </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">1660                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2017</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-585526" style="width: 10%; float: left;" name="News[2017][]" value=" 585526" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-585526" class="markNews_label__custom">  </label>
        <span class="markNews-label">Бизнес и предпринимательство в Приморье: цифры и факты </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">10871                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2017</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-585487" style="width: 10%; float: left;" name="News[2017][]" value=" 585487" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-585487" class="markNews_label__custom">  </label>
        <span class="markNews-label">Стали известны подробности перестрелки в воинской части в Приморье </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">10352                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2016</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-502181" style="width: 10%; float: left;" name="News[2016][]" value=" 502181" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-502181" class="markNews_label__custom">  </label>
        <span class="markNews-label">Loft №1 во Владивостоке: как в стенах студии выросли школа и "бюро" фотопутешествий </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">9624                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2016</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-502644" style="width: 10%; float: left;" name="News[2016][]" value=" 502644" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-502644" class="markNews_label__custom">  </label>
        <span class="markNews-label">Вратарь "Адмирала" и сборной России оказался в центре скандала с погоней и разбитой Audi </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">8728                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2015</h3>
        <label class="control-group__label label-checked">
                            <input type="radio" class="markNews" id="mark-radio-434479" style="width: 10%; float: left;" name="News[2015][]" value=" 434479" checked="checked" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-434479" class="markNews_label__custom">  </label>
        <span class="markNews-label">Гимнастка из Уссурийска представила Приморье на Чемпионате России </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">3002                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2015</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-434475" style="width: 10%; float: left;" name="News[2015][]" value=" 434475" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-434475" class="markNews_label__custom">  </label>
        <span class="markNews-label">Госдума РФ приняла президентский проект амнистии в честь 70-летия Победы </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">2846                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2014</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-353121" style="width: 10%; float: left;" name="News[2014][]" value=" 353121" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-353121" class="markNews_label__custom">  </label>
        <span class="markNews-label">"Хостельный" бум во Владивостоке: койко-место с wi-fi и видом на море за 500 рублей  </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">11523                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2014</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-353171" style="width: 10%; float: left;" name="News[2014][]" value=" 353171" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-353171" class="markNews_label__custom">  </label>
        <span class="markNews-label">Офисный планктон и бойцы поделят таинственный "замок" во Владивостоке   </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">4068                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2013</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-272621" style="width: 10%; float: left;" name="News[2013][]" value=" 272621" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-272621" class="markNews_label__custom">  </label>
        <span class="markNews-label">Звонить Путину сегодня не буду, потому что разочарована в его ответах – Мария Соловьенко </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">6185                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2013</h3>
        <label class="control-group__label ">
                            <input type="radio" class="markNews" id="mark-radio-272475" style="width: 10%; float: left;" name="News[2013][]" value=" 272475" onclick=" $('#btn_submit').prop('disabled', '')">
                            <label for="mark-radio-272475" class="markNews_label__custom">  </label>
        <span class="markNews-label">Ребенок пропал на кладбище в Приморье </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">4941                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
    </div>
  </div>

  <div class="control-button__container">
    <button type="reset" class="btn btn-default thisday-form-butt" name="cansel-button" onclick="$(&quot;#btn_submit&quot;).prop('disabled','disabled')">Сбросить</button>

    <button type="submit" id="btn_submit" class="btn btn-primary" name="resume-button" disabled="disabled">Далее</button>

  </div>
</form>

Здесь не вся форма в плане html, если ее будет недостаточно, то я могу дополнить вопрос.

2 ответа 2

1

надеюсь правильно понял вопрос.

Суть в том, что событие reset сбрасывает только поведение пользователя
(введенный текст и checked на input, textarea и т.д).
Основное поведение было заданно через скрипт, поэтому reset обнулить его не может.

Один из вариантов, отлавливать обнуление и обнулять во всех input атрибут disabled.
Я переписал все на JQuery, так быстрее будет.
https://codepen.io/AndreyMyP/pen/wjzWrE

$("#senderForm [type='reset']").mousedown(function() {
  $("input[type='radio']").prop("disabled", false);            
  countText.text(maxCheckedButt - 1);
  switchOnChange(countAnyNews);
});
2
  • У вас все работает круто, но есть проблема) Когда я нажал на какую то radio кнопку, она выберется, это круто, но если я нажму на неё же снова, то checked не пропадет и счетчик не обновится и я не смогу выбрать другую новость) Т.е как бы переключение по клику выбрана/не выбрана с обновлением счетчика выбранных новостей) 26 апр 2018 в 9:09
  • А она и не пропадет, вам нужно все не через radio делать, а через checkbox, обычно выбирают тип radio, когда нужно сделать 1 выбор между несколькими вариантами, например: @ЕвгенийШалаев Выберите ваш самый любимый цвет (Красный, зеленый, синий и т.д), вот хорошая статья по инпутам: htmlbook.ru/html/input/type 26 апр 2018 в 10:32
0

В общем решил все это вот так (большое спасибо @frogFrogov за помощь, его код оказался очень полезен)

  var maxCheckedButt = 4,
  countAnyNews = 0,
  countText = $("#countRadioButt");
var radioButtCheckNum = document.querySelectorAll(".markNews:checked").length;
var radioButtArr = $(".markNews");
var prvEl, prvChecked;
countText.text(maxCheckedButt - radioButtCheckNum);
switchOnChange(maxCheckedButt - radioButtCheckNum);
//Событие изменения инпутов в форме
$("#senderForm input[type='radio']").click(function(e) {
  if (prvEl != this) {
prvChecked = false;
prvEl = this;
  }
  this.checked = !prvChecked;
  prvChecked = !prvChecked;

  // Узнаем кол-во чекнутых input
  var countChecked = $(":checked").length;
  countAnyNews = maxCheckedButt - countChecked;

  countText.text(maxCheckedButt - radioButtCheckNum);
  switchOnChange(maxCheckedButt - radioButtCheckNum);

  //если ничего не выбрано
  if (countChecked === 0) {
$("#btn_submit").prop("disabled", true);
  }

  getDisValue(countChecked, maxCheckedButt);
});

$("#senderForm [type='reset']").mousedown(function() {
  $("input[type='radio']").prop("disabled", false);
  countText.text(maxCheckedButt - radioButtCheckNum);
  switchOnChange(maxCheckedButt - radioButtCheckNum);
  $("#senderForm input:not(:checked)")
// .parent()
.removeClass("label-checked");
});

function getDisValue(currentVal, maxVal) {
  if (currentVal >= maxVal) {
$("input[type='radio']").prop("disabled", true);
$(":checked").removeAttr("disabled");
  } else {
$("input[type='radio']").removeAttr("disabled");
  }
}

function switchOnChange(arrg) {
  switch (arrg) {
case 0:
  notifSpan.innerHTML = " новостей";
  break;
case 1:
  notifSpan.innerHTML = " новость";
  break;
case 2:
  notifSpan.innerHTML = " новости";
  break;
case 3:
  notifSpan.innerHTML = " новости";
  break;
case 4:
  notifSpan.innerHTML = " новости";
  break;
default:
  notifSpan.innerHTML = " новостей";
  }
}
.ThisDay-default-index {
  position: relative;
}

.control-group .group-header:not(:nth-child(1)) {
  display: none;
}

.horizontal-scroll-wrapper {
  width: 100%;
}

.control-group {
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  width: auto;
  height: auto;
  margin: 10px;
  max-width: 285px;
  max-height: 345px;
  min-height: 345px;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: normal;
}

.thisday-container {
  width: 55%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin: 10px auto;
}

.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 4px;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}

.control--radio .control__indicator {
  border-radius: 50%;
}

.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
  background: #ccc;
}

.control input:checked~.control__indicator {
  background: #2aa1c0;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
  background: #0e647d;
}

.control input:disabled~.control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control__indicator:after {
  display: block;
}

.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}

.control--radio input:disabled~.control__indicator:after {
  background: #7b7b7b;
}

.control-views-count {
  position: relative;
  display: block;
  float: right;
  font-weight: 500;
  margin-right: 15px;
  margin-left: 15px;
  font: normal normal normal 13px/1 FontAwesome;
  line-height: 20px;
  color: #695454;
}

.control-views-count:before {
  margin: 4px;
}

.thisday-butt,
.thisday-btn {
  float: right;
}

.thisday-time {
  display: flex;
}

.thisday-content {
  clear: both;
}

.control-group .group-header:not(:nth-child(1)) h3 {
  display: none !important;
}

.control-button__container {
  text-align: center;
}

.thisday-list__button {
  float: left;
  margin-right: 20px;
}

.group-header {
  margin-left: 4px;
}

.thisday-time #userdate {
  margin-left: 5px;
  margin-right: 5px;
  width: 10%;
  text-align: center;
}

.bs-native-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.thisday-form-butt {
  margin-right: 20px;
}

.markNews {
  display: none;
  position: relative;
}

.markNews+.markNews_label__custom {
  background: #dad7d7;
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 0 0 0 0px;
  margin: 0 10px 0 5px;
  border-radius: 50%;
  position: relative;
}

.markNews:checked+.markNews_label__custom::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #58b790;
  height: 14px;
  width: 14px;
  display: inline-block;
  padding: 0 0 0 0px;
  border-radius: 50%;
}

.markNews_label__custom:hover {
  background: #cfe330;
  cursor: pointer;
}

.markNews-label {
  font-weight: 400;
  cursor: pointer;
}

.label-checked {
  background-color: #72f1638f;
  display: block;
  padding: 10px 5px;
  box-shadow: 0px 1px 10px #bdbdbd;
  margin: 0 3px;
}


/* label {
  transition-duration: .3s;
} */

.control-group__label:not(.label-checked):hover,
.control-group__label:not(.label-checked):focus {
  background-color: #9dd9f68f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="senderForm" class="thisday-content" action="/edit" method="post" data-pjax="1">
  <input type="hidden" name="_csrf" value="rjCmfkMlqVdNvBQfS-o8pZ9hs__jEMudiG_0MYzSMvLvUcwWKWOEMn74Q08Emg3R7xnDuaV6kuX9NbhJu-ZXhw==">
  <div class="thisday-time"><span style="margin: 0 auto;">Вы можете выбрать еще <strong id="countRadioButt">1</strong><strong id="notifSpan"> новость</strong> </span></div>
  <div class="thisday-container">
    <div class="horizontal-scroll-wrapper">
      <div class="control-group">
        <h3 class="group-header">2018</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-688204" style="width: 10%; float: left;" name="News[2018][]" value=" 688204" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-688204" class="markNews_label__custom">  </label>
        <span class="markNews-label">"Должны есть грязь и отказаться быть человеком" – рабочий из КНДР во Владивостоке </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">16808                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2018</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-688251" style="width: 10%; float: left;" name="News[2018][]" value=" 688251" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-688251" class="markNews_label__custom">  </label>
        <span class="markNews-label">Новым главой фонда капремонта Приморья стал Александр Коваль </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">1660                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2017</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-585526" style="width: 10%; float: left;" name="News[2017][]" value=" 585526" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-585526" class="markNews_label__custom">  </label>
        <span class="markNews-label">Бизнес и предпринимательство в Приморье: цифры и факты </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">10871                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2017</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-585487" style="width: 10%; float: left;" name="News[2017][]" value=" 585487" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-585487" class="markNews_label__custom">  </label>
        <span class="markNews-label">Стали известны подробности перестрелки в воинской части в Приморье </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">10352                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2016</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-502181" style="width: 10%; float: left;" name="News[2016][]" value=" 502181" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-502181" class="markNews_label__custom">  </label>
        <span class="markNews-label">Loft №1 во Владивостоке: как в стенах студии выросли школа и "бюро" фотопутешествий </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">9624                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2016</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-502644" style="width: 10%; float: left;" name="News[2016][]" value=" 502644" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-502644" class="markNews_label__custom">  </label>
        <span class="markNews-label">Вратарь "Адмирала" и сборной России оказался в центре скандала с погоней и разбитой Audi </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">8728                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2015</h3>
        <label class="control-group__label label-checked">
          <input type="radio" class="markNews" id="mark-radio-434479" style="width: 10%; float: left;" name="News[2015][]" value=" 434479" checked="checked" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-434479" class="markNews_label__custom">  </label>
        <span class="markNews-label">Гимнастка из Уссурийска представила Приморье на Чемпионате России </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">3002                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2015</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-434475" style="width: 10%; float: left;" name="News[2015][]" value=" 434475" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-434475" class="markNews_label__custom">  </label>
        <span class="markNews-label">Госдума РФ приняла президентский проект амнистии в честь 70-летия Победы </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">2846                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2014</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-353121" style="width: 10%; float: left;" name="News[2014][]" value=" 353121" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-353121" class="markNews_label__custom">  </label>
        <span class="markNews-label">"Хостельный" бум во Владивостоке: койко-место с wi-fi и видом на море за 500 рублей  </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">11523                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2014</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-353171" style="width: 10%; float: left;" name="News[2014][]" value=" 353171" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-353171" class="markNews_label__custom">  </label>
        <span class="markNews-label">Офисный планктон и бойцы поделят таинственный "замок" во Владивостоке   </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">4068                            </i>
        </label>
        <div class=""></div>
        <br>
      </div>
      <div class="control-group">
        <h3 class="group-header">2013</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-272621" style="width: 10%; float: left;" name="News[2013][]" value=" 272621" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-272621" class="markNews_label__custom">  </label>
        <span class="markNews-label">Звонить Путину сегодня не буду, потому что разочарована в его ответах – Мария Соловьенко </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">6185                            </i>
        </label>
        <div class=""></div>
        <br>
        <h3 class="group-header">2013</h3>
        <label class="control-group__label ">
          <input type="radio" class="markNews" id="mark-radio-272475" style="width: 10%; float: left;" name="News[2013][]" value=" 272475" onclick=" $('#btn_submit').prop('disabled', '')">
          <label for="mark-radio-272475" class="markNews_label__custom"></label>
        <span class="markNews-label">Ребенок пропал на кладбище в Приморье </span>
        <i class="control-views-count fa fa-eye" title="Просмотры">4941</i>
        </label>
        <div class=""></div>
        <br>
      </div>
    </div>
  </div>

  <div class="control-button__container">
    <button type="reset" class="btn btn-default thisday-form-butt" name="cansel-button" onclick="$(&quot;#btn_submit&quot;).prop('disabled','disabled')">Сбросить</button>

    <button type="submit" id="btn_submit" class="btn btn-primary" name="resume-button" disabled="disabled">Далее</button>

  </div>
</form>

Тут все что нужно с отменой выбора, блекджеком и вот этим всем.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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