SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast DmitryS's Avatar
    Join Date
    Feb 2011
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    disable checkboxes once the count is 5

    Hi,

    I have a foreach loop that displays survey testimonials. The user is allowed to pick only 5 testimonials. Is there an easy way to disable the rest of the checkboxes once the selected item is 5? I was trying this in jquery but this is not doing anything. Any help or idea would be greatly appreciated. Thanks!!

    <script type="text/javascript">
    $(document).ready(function () {
    var checkedcount = 0;
    $('.chkItems').click(function () {
    if (this.checked)
    checkedcount++;
    else
    checkedcount--;
    if (checkedcount >= 5)
    $('.chkItems:notchecked)').attr("disabled", "disabled");
    else
    $('.chkItems:notchecked)').removeAttr("disabled");
    });
    });
    </script>

    @using (Html.BeginForm())
    {
    <table width="100%" cellpadding="0" cellspacing="0"
    rules="all">
    <thead>
    <tr>
    <td align="center" style="padding: 2px 0 2px 2px;">Select</td>
    <td align="center" style="padding: 2px 0 2px 2px;">First Name</td>
    <td align="center" style="padding: 2px 0 2px 2px;">Last Name</td>
    <td align="center" style="padding: 2px 0 2px 2px;">Testimonial</td>
    </tr>
    </thead>
    @{ var i = 0;
    }
    @foreach (var testimonials in Model.Testimonials)
    {
    <tr>
    <td style="padding: 2px 0 2px 2px;">
    @Html.CheckBox("Testimonials[" + i.ToString() + "].DisplayTestimonials", testimonials.DisplayTestimonials.Value, new { @class = "chkItems" })
    @Html.Hidden("Testimonials[" + i.ToString() + "].ResponseId", testimonials.ResponseId.ToString())
    </td>
    <td style="padding: 2px 0 2px 2px;">@Html.TextBox("Testimonials[" + i.ToString() + "].FirstName", testimonials.FirstName, new { @readonly = "readonly", @class = "TextBoxAsLabel" })</td>
    <td style="padding: 2px 0 2px 2px;">@Html.TextBox("Testimonials[" + i.ToString() + "].LastName", testimonials.LastName, new { @readonly = "readonly", @class = "TextBoxAsLabel" })</td>
    <td style="padding: 2px 0 2px 2px;">@Html.TextBox("Testimonials[" + i.ToString() + "].Question5Answer", testimonials.Question5Answer.ToString(), new { @readonly = "readonly", @class = "TextBoxAsLabel" })</td>
    </tr>
    i++;
    }
    </table>
    }

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the way to do it, although it is in JavaScript, rather than JQuery. If you get to six boxes checked the script disables the remaining boxes. If however you untick a box then you can add another tick to get back to five.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Check Boxes Disabled</title>
    <script type="text/javascript">
    <!--
    var dmf=null; // global
    window.onload=function(){
       dmf=document.myForm; // shortcut
       for(i=0; i<dmf.elements.length; i++)
         { dmf.elements[i].onchange=getChecked; }
      }
    // ----------
     var boxesChecked=new Number(0), counterObj=null;  // global 
     function getChecked(evt)
      { evt=(evt)?evt : ((window.event)? event : null);
        var elem=(evt.target)? evt.target : ((evt.srcElement)? evt.srcElement : null);
        boxesChecked=(elem.checked==true)? boxesChecked+1 : boxesChecked-1;
        if(boxesChecked<6)
         { // need this to allow user to untick a box and choose another 
           for(i=0; i<dmf.elements.length; i++)
             { if(dmf.elements[i].checked==false){ dmf.elements[i].disabled=false; } 
              }
           document.getElementById("B1").value=boxesChecked; }       
        else
         { // remove checkmark from current box and adjust totals
           elem.checked=false;
           boxesChecked=boxesChecked-1;    
           document.getElementById("B1").value=boxesChecked;
         // disable unchecked boxes  
           for(i=0; i<dmf.elements.length; i++)
             { if(dmf.elements[i].checked==false){ dmf.elements[i].disabled=true; } 
              }
           alert("finished"); 
         }  
      }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:center; margin:3px 0px; }
    p    { margin-top:0px; margin-bottom:3px; }
    #wrap { position:relative; top:0px; left:0px; width:900px; height:500px; text-align:left;  margin:0px auto;  }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <form name="myForm">
        <p>1: <input type="checkbox" name="C1" value="ON"></p>
        <p>2: <input type="checkbox" name="C2" value="ON"></p>
        <p>3: <input type="checkbox" name="C3" value="ON"></p>
        <p>4: <input type="checkbox" name="C4" value="ON"></p>
        <p>5: <input type="checkbox" name="C5" value="ON"></p>
        <p>6: <input type="checkbox" name="C6" value="ON"></p>
        <p>7: <input type="checkbox" name="C7" value="ON"></p>
        <p>8: <input type="checkbox" name="C8" value="ON"></p>
      </form>
      <p><input id="B1" type="text" name="B1" value="0" size="5">
      <!-- end form -->
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>

  3. #3
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I notice that the onchange handler is not working properly in IE. This should be changed to onclick to fix the problem as follows

    window.onload=function(){
    dmf=document.myForm; // shortcut
    for(i=0; i<dmf.elements.length; i++)
    { dmf.elements[i].onclick=getChecked; }
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •