Prevent checkbox from being selected in Javascript

Question

I have a JavaScript function that checks if a checkbox is selected.

If yes, It count how many check boxes are selected and checks if the max number of selected (4) is reached.

The thing is:

How can I make that the function show an alert and disable all the unchecked check boxes when I try to check a fifth?

Even the one that was tried to be checked as the 5 one.

 function ChkValidate() {

          var chkDytLek = document.getElementById("ChkDytLek");
          var chkDytUSD = document.getElementById("ChkDytUSD");
          var chkDytEU = document.getElementById("ChkDytEU");
          var chkDytCAD = document.getElementById("ChkDytCAD");
          var chkDytCHF = document.getElementById("ChkDytCHF");
          var chkDytAUD = document.getElementById("ChkDytAUD");
          var chkDytGBP = document.getElementById("ChkDytGBP");

          var MaxCount = 0
          var unCheckedCount = 0

          if (chkDytLek.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {

                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1 
          }

          if (ChkDytUSD.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }  
          if (ChkDytEU.checked == true) {
              MaxCount = MaxCount + 1
              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

          if (ChkDytCAD.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

          if (ChkDytCHF.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }
          if (ChkDytGBP.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

          if (ChkDytAUD.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();


              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

           if (unCheckedCount >= 4) {                  
              enableIfNotChecked();
           }


      }

The current code displays an alert and disables the checkboxes when the count is 4.

When I want this to happen at the 5 one, but if I change this:

 if (MaxCount == 4) {
                  disableIfNotChecked();

to:

 if (MaxCount == 5) {
                  disableIfNotChecked();

The code will disable the check boxes but will also check the one that was selected as the 5.

Any idea how can I give a solution to this situation?

i'm guessing you're calling ChkValidate() on the check event of a checkbox, could you post that code? that's where you need to uncheck the box that you currently checked, probably by returning a false or something from ChkValidate() — Liviu Boboia
– Liviu Boboia, Commented Apr 12, 2018 at 13:49
<asp:CheckBox ID="ChkDytCAD" runat="server" GroupName="Monedha" Text="CAD" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" /> — Lara
– Lara, Commented Apr 12, 2018 at 13:50

goediaz · Accepted Answer · 2018-04-12 14:19:52Z

1

I think that you need some sort of control when to try to select a checkbox.

Try this:

$('input[type="checkbox"]').on('click', function(event) {
  if(maxCount == 5) {
    event.preventDefault();
    alert('So many checkboxes');
  }    
});

Here is the fiddle:

http://jsfiddle.net/DrKfE/817/

edited Apr 12, 2018 at 14:19

answered Apr 12, 2018 at 13:32

goediaz

6626 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lara Over a year ago

fistly this if(MaxCount <= 4) { disableIfNotChecked(); } means that if max count is 1,2,3 or 4 my checkboxes will disable, when in fact its not this what i want. The other thing is that what i am trying to acomplish is, that if the user selects the 5 one, the code will count will say (sorry you cant select more than 4) ant than this checkbox will be unchecked automatically

goediaz Over a year ago

Ok I think that I get you now. Check the answer.

goediaz Over a year ago

You can change the value of the maxCount in the fiddle in order to check it properly.

Liviu Boboia · Accepted Answer · 2018-04-12 14:02:11Z

0

Add this to the function call inside your checkbox ChkValidate(this)

<asp:CheckBox ID="ChkDytCAD" runat="server" GroupName="Monedha" Text="CAD" CssClass="radioMarginLeft" onClick="ChkValidate(this)" ClientIDMode="Static" />

Add the parameter to the function and at the end of the function uncheck it when you have 4 boxes ticked

function ChkValidate(checkbox) {
    ...
    if (MaxCount > 4) {
        checkbox.checked = false;
    }
}

this is a fiddle with an example, that does pretty much what you want, it will only let you check a maximum of 4 boxes at once https://jsfiddle.net/2p069wvb/8/

answered Apr 12, 2018 at 14:02

Liviu Boboia

1,7241 gold badge10 silver badges21 bronze badges

2 Comments

Lara Over a year ago

should i put this even somewhere else because nothing is happening

Liviu Boboia Over a year ago

just add the if statement at the end of your function and add this to ChkValidate(this) in your asp:CheckBox and it should work

Collectives™ on Stack Overflow

Prevent checkbox from being selected in Javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related