Снимите флажок с первой проверки CheckBox, когда количество превышает Maxlimit

У меня есть CheckBoxList, и мое требование - разрешить пользователю выбирать максимум три варианта (через Javascript), и как только он нажимает на четвертый, первый выбранный CheckBox не снят, аналогично, когда он выбирает пятый (другой), CheckBox, который был выбран вторым, не снят и так далее. В конечном итоге пользователь остается только с тремя выбранными параметрами.Снимите флажок с первой проверки CheckBox, когда количество превышает Maxlimit

Например. В данном изображении, если пользователь выбирает .Net (первый), Java (второй), PHP (третий), и когда он выбирает SQL (четвертый), .Net не контролируется и SQL проверяется. Далее, когда он выбирает Cloud Computing (пятый), Java не контролируется.

enter image description here

Я написал следующий Javascript, который работает отлично для первого сценария и непредставленных проверок первого выбранного элемента, когда выбран четвёртые один, но он не работает, потому что дальше counter значение снова достигает до 4, и cbArray[counter - 4] снова пытается снять первый флажок вместо второго. Как решить эту проблему. Благодарю.

Мой Javascript:

<script type="text/javascript" language="javascript"> 
     function limitChecked(maxCount) { 
      debugger; 
      var ocbList = document.getElementById('cbList'); 
      var cbArray = ocbList.getElementsByTagName('input'); 
      var counter = 0; 
      for (var i = 0; i < cbArray.length; i++) { 
       if (cbArray[i].checked==true) { 
        counter++; 
        if (counter > maxCount) { 
          cbArray[counter - 4].checked = false; 
        } 
       } 
      } 
     } 
</script>

.aspx Код:

<body> 
    <form id="form1" runat="server"> 
    <div> 
     Courses: 
     <asp:CheckBoxList ID="cbList" runat="server" onclick="limitChecked(3)"> 
      <asp:ListItem>.Net</asp:ListItem> 
      <asp:ListItem>Java</asp:ListItem> 
      <asp:ListItem>PHP</asp:ListItem> 
      <asp:ListItem>SQL</asp:ListItem> 
      <asp:ListItem>Cloud Computing</asp:ListItem> 
     </asp:CheckBoxList> 
    </div> 
    </form> 
</body>

источник

2013-07-26 RahulD

Добавить отдельные элементы в массив, как они проверены, после того, как счетчик превысит 4, удалите первый элемент в массиве (используя метод среза). Я слишком ленив, чтобы написать это прямо сейчас, но вы поняли эту идею. – Trendy

@Trendy Спасибо за ввод. Я собираюсь попробовать. – RahulD

Нет проблем, извините, если это было расплывчато, но @McGarnagle также предоставил достаточный ответ. – Trendy

Вы можете использовать пуш/поп вместо счетчика. Использование slice(0) позволяет использовать массив как очереди FIFO:

function limitChecked(maxCount) { 
     debugger; 
     var ocbList = document.getElementById('cbList'); 
     var cbArray = ocbList.getElementsByTagName('input'); 
     var checked = []; 
     for (var i = 0; i < cbArray.length; i++) { 
      if (cbArray[i].checked==true) { 
       checked.push(i); 
       if (checked.length > maxCount) { 
        cbArray[checked[0]].checked = false; 
        checked = checked.slice(1); 
       } 
      } 
     } 
    }

источник

2013-07-26 23:14:03 McGarnagle

Спасибо за ответ. Я собираюсь попробовать это. – RahulD

Я пробовал это решение, но это не позволяет пользователю выбрать четвертый вариант, в то время как я хочу, чтобы он выбрал четвертый и снимет первую. Благодарю. – RahulD

Я только что отлаживал этот код. Фактически, он отменяет последний выбранный (последний) элемент вместо первого. Выполнение LIFO вместо FIFO. – RahulD

Согласно предложению Trendy (в ответ McGarnagle также помог) я пришел к этому решению, которая работает хорошо для меня.

function limitChecked(maxCount) { 
      debugger; 
      var ocbList = document.getElementById('cbList'); 
      var cbArray = ocbList.getElementsByTagName('input'); 
      var checkedArray = []; 
      for (var i = 0; i < cbArray.length; i++) { 
       if (cbArray[i].checked == true) { 
        checkedArray.push(i); 
        if (checkedArray.length > maxCount) { 
         checkedArray = checkedArray.slice(0); 
         cbArray[checkedArray[0]].checked = false; 
        } 
       } 
      } 
     }

источник

2013-07-27 00:59:09 RahulD

Снимите флажок с первой проверки CheckBox, когда количество превышает Maxlimit

ответ

Смежные вопросы