CODEWITHSUNDEEP
javascriptcheckbox
Lara
Lara

Reputation: 189

Prevent checkbox from being selected in Javascript

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?

Upvotes: 0

Views: 1000

Answers (2)

goediaz
goediaz

Reputation: 652

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/

Upvotes: 1

Liviu Boboia
Liviu Boboia

Reputation: 1754

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/

Upvotes: 0

Related Questions