Блокировка чекбокса и удаление сгенерированного им элемента

Question

если пока отметил один чекбокс и ввел значение а после отметил другой, занчение в первом обнуляется. изменил код, все работает кроме одного. если блокировать ранее отмечении чекбокс при выборе другого, принадлежащий ранее отмеченому чекбоксу инпут остается. надо заново его отмети и снять чтоб его удалить. kak это исправить?

$(function () {
   let checkboxs = $('.sum_value input:checkbox');
   checkboxs.change(function () {
      $('#options_value2').html('');
      if (this.checked) {
         let input = $(`<input class="number" type="number" value="0" max="${this.value}" />`);
         $(this).data('input', input);
      } else $(this).removeData('input');
      checkboxs.each(function (i, checkbox) {
         if ($(checkbox).data('input')) $('#options_value2').append([checkbox.value, $(checkbox).data('input'), '<br>']);
      })
      $('#options_value2').trigger('input');
   });
   $('#options_value2').on('input', function () {
      let sum = $('[type="number"]', this).get().reduce((sum, {
         valueAsNumber
      }) => sum + valueAsNumber, 0)
      $('.options_sum span').text(sum);

   })
});


const masterCheckbox1_1 = document.querySelector('input[type="checkbox"][id="1_1"]');
const slaveCheckboxes2_2 = document.querySelectorAll('input[type="checkbox"][id*="2_2"]');
masterCheckbox1_1.addEventListener('change', function () {
   slaveCheckboxes2_2.forEach(checkbox => {
      checkbox.checked = false;
      checkbox.disabled = masterCheckbox1_1.checked;
   });
});

   <html>

      <head>
         <title>Untitled</title>
         <meta charset="utf-8">
            <style type="text/css">
            </style>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

      </head>

      <body>
         <div class="grid_css">
            <div class="column_1">
               <ul id="accordion">
                  <li>
                     <div class="line_All_green">
                        <div class="sum_value">
                           <div id="1" class="table-td">
                              <input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
                           </div>
                           <div id="2" class="table-td">
                              <input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
                           </div>
                           <div id="3" class="table-td">
                              <input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
                           </div>
                        </div>
                     </div>
                  </li>
               </ul>
            </div>
            <div class="column_3" id="column_3">
               <div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
               <div class="options_value2" id="options_value2">
                  <p id="options_value2" class="options_value2"></p>
               </div>
               <button id="button2" class="button2"> Copy </button>
            </div>
         </div>
      </body>

   </html>

БЛОГ НА HUSL

Блокировка чекбокса и удаление сгенерированного им элемента

Ответы (0 шт):