Incorrectly works onchange js

Question

There is a form that is presented below. Elements in it are formed by choosing values from the base. In general, this is not particularly important, except for the fact that some of the radio buttons are already marked as "checked", because they are present in the table.

What am I trying to do with js? See the top counter? It now says that I can select 1 news. I choose it, the counter shows that I can select 0 news, I click on the "reset" button and nothing happens) there is still 0 news left and nothing can be selected. This happens because all elements have the disabled property set, but if I reset the selection or cancel it by clicking the radio button again, the counter will not be updated and it will be impossible to select some news again!

How can I fix this?

The form itself is lower (it’s better to look at the whole screen)

 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> = "_ csrf" value = "rjCmfkMlqVdNvBQfS-o8pZ9hs__jEMudiG_0MYzSMvLvUcwWKWOEMn74Q08Emg3R7xnDuaV6kuX9NbhJu-ZXhw =="> <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>

This is not the whole form in terms of html, if it is not enough, then I can add a question.

Frog frog frog frog 352 2 sixteen · Answer 1 · 2018-04-26T09:00:11

I hope I understand the question correctly.

The bottom line is that the reset event resets only user behavior.
(entered text and checked on input, textarea, etc.) .
The main behavior was set via a script, so reset cannot reset it.

One of the options is to catch zeroing and zeroing in all input attribute is disabled.
I rewrote everything in jQuery, so it will be faster.
https://codepen.io/AndreyMyP/pen/wjzWrE

 $("#senderForm [type='reset']").mousedown(function() { $("input[type='radio']").prop("disabled", false); countText.text(maxCheckedButt - 1); switchOnChange(countAnyNews); });

Everything works great for you, but there is a problem) When I clicked on some kind of radio button, it will get out, it's cool, but if I click on it again, the checked will not disappear and the counter will not update and I will not be able to select another news) Ie, as if switching on click is selected / not selected with updating the counter of selected news)
But it will not disappear, you need to do everything not through radio, but through the checkbox, you usually choose the type of radio, when you need to make 1 choice between several options, for example: @ YevgenyShalaev Choose your favorite color (Red, green, blue, etc.) d), here is a good article on the way: htmlbook.ru/html/input/type

Accepted Answer · 2018-04-27T02:00:12

In general, I decided all this like this (thank you very much @frogFrogov for the help, his code was very useful)

  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> = "_ csrf" value = "rjCmfkMlqVdNvBQfS-o8pZ9hs__jEMudiG_0MYzSMvLvUcwWKWOEMn74Q08Emg3R7xnDuaV6kuX9NbhJu-ZXhw =="> <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>

It's all that is needed with the cancellation of the choice, blackjack and that's it.

Incorrectly works onchange js

2 answers 2

I hope I understand the question correctly.

More articles: