www.webdeveloper.com
Results 1 to 14 of 14

Thread: Disable checkboxes dynamically

  1. #1
    Join Date
    Apr 2012
    Posts
    10

    Disable checkboxes dynamically

    Hello,

    I've this javascript code:

    Code:
    <script>
    
    var total=10000;
    
    function sumar(valor) {
    total += valor; 
    document.equipo.total.value=total;
    }
    
    function restar(valor) {
    total-=valor; 
    document.equipo.total.value=total;
    
    if (total < 0) {
      alert("No hay más presupuesto");
     }
    
    
    }
    
    </script>
    And I call the function in this line:

    PHP Code:
    <label for="jugador-<? echo $id?>">  <input name="jugadores[]" id="jugador-<? echo $id?>" value="<? echo $nombre?>" type="checkbox" onclick="if (this.checked) restar(<? echo $precio?>); else sumar(<? echo $precio?>)" /></label>
    Now, what I want is this: When click a checkbox (and the var "total" change) disable all checkboxes whom value is more than "total" and enable them again if the value is less than "total".

    The concept is that you have a budget and you cannot buy an item that cost more money that the one you have.

    I hope you can help me with this and sorry for the grammar and spelling mistakes but i'm still learning english (and javascript lol).

  2. #2
    Join Date
    Mar 2012
    Posts
    202
    There is probably a better way of accomplishing your task. What you want requires iteration of elements on a page and the method of calculation seems unreliable. I would create an array or javascript object with all IDs and associated "values". Then a simple function could be created to iterate through the list of checkbox IDs and do calculations based on their current checkbox state and values.

  3. #3
    Join Date
    Mar 2012
    Posts
    202
    I will check back later and if you still need some code to work with I can help.

  4. #4
    Join Date
    Apr 2012
    Posts
    10
    Gray,

    Thank you very much for your help.

    I would be very thankful if you could give me a piece of code to work with. As I understand, you said it's better to create and array with the ID's and it's values. I need to clarify something:

    The selected checkboxes need to be inserted in a DB but I don't need to insert the "price" but the Name of the item. So, in my code vale="$name" and not value=$price". This is the reason I write the code this way: onclick="if (this.checked) restar(<? echo $precio; ?>); else sumar(<? echo $precio; ?>).

    Probably, as you said, I'm taking the wrong aproach and need to rethink. Any help in this would be great!

  5. #5
    Join Date
    Apr 2012
    Posts
    10
    I'm still can't figure out a way of do this. Please, if anybody has a suggestion or a piece of code to work with I'll be thankful.

    Good night!

  6. #6
    Join Date
    Nov 2010
    Posts
    1,084
    ¿que onda, Samue? saludos desde Guatemala.

    this shouldn't be too hard to do, but I don't understand how your checkboxes look - you say you want to 'disable all checkboxes whom value is more than "total" ' but it looks like their value attribute is filled with the player name. How do you know if a checkbox value is more than the total?

    If you can show us how the page is rendered (just run the page, copy a couple of lines of checkbox code from the source and paste it here) it should be easier to see what's going on.

  7. #7
    Join Date
    Apr 2012
    Posts
    10
    Hola, Xelawho!

    Guatemala, what a nice country. I've been in Antigua and I really like it there. I'll try to explain in english because I guess you cannot write in spanish on the forums.

    So, the render is this:

    Code:
     <td>
    
    <label for="jugador-7">  <input name="jugadores[]" id="jugador-7" value="Leo Fernández" type="checkbox" onclick="if (this.checked) restar(3600); else sumar(3600)" /></label>                                               
    
                            </td>
    You're right. The value of the checkbox is the Player's name because is what I need to insert in my DB (not the price). So, I manage to do the sums and subtractions with the OnClick event.

    As I said before, I'm pretty sure I'm taking the wrong aproach but I've a very limited experience with Javascript.

    If you need anything else, I'll be around

    Thank you for your help!

  8. #8
    Join Date
    Nov 2010
    Posts
    1,084
    ok... let's start with the half-assed workaround

    how about using the "title" attribue to store the player values?

    I made some assumptions here, mainly that if a checkbox is checked it shouldn't be disabled so that people can change their mind about that selection

    Notice that here all you have to do is echo the title attribute in from your db and your onclicks will pick that up automatically

    see if it works for you, anyway...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <script type="text/javascript">
    var total=10000;
    
    function sumar(valor) {
    total += valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}		
    	}
    }
    
    function restar(valor) {
    total-=valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}
    	}
    	
    if (total < 0) {
      alert("No hay más presupuesto");
     }
    
    }
    </script>
    <form name="equipo">
    <input name="jugadores[]" id="jugador-7" value="Leo Fernández" title="3600" type="checkbox" onclick="if (this.checked) restar(Number(this.title)); else sumar(Number(this.title))" />
    <input name="jugadores[]" id="jugador-8" value="José López"  title="5800" type="checkbox" onclick="if (this.checked) restar(Number(this.title)); else sumar(Number(this.title))" />
    <input name="jugadores[]" id="jugador-9" value="Juan Fulano"  title="9700" type="checkbox" onclick="if (this.checked) restar(Number(this.title)); else sumar(Number(this.title))" />
    <input name="total" type="text" value="10000">
    </form>
    </body>
    </html>

  9. #9
    Join Date
    Apr 2012
    Posts
    10
    Xela,

    It's work great! You solved the problem just perfectly.

    I want to ask one more thing: What is the best way to limit the number of selected checkboxes independently of the sum?

    I've this script:

    Code:
    <script>
    var maxi = 8;
    function registra(c) {
    cuenta = 0;
    for (i = 0, f = c.form, n = c.name, total = f[n].length; i < total; i ++)
     cuenta += (f[n][i].checked) ? 1 : 0;
    if (cuenta > maxi) {
      alert("El equipo no puede tener más de " + maxi + " jugadores");
      c.checked = false;
      --cuenta;
     }
     f.contador.value = cuenta;
    }
    </script>
    And I called using onchange="registra(this)" but I would like to be able to check the number of selected checkboxes usign the function sumar(). Is it possible?

    Thank you very much for your help,

  10. #10
    Join Date
    Nov 2010
    Posts
    1,084

    shouldn't it be on the restar() function (the one that runs when a checkbox is checked?)

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <script type="text/javascript">
    var total=10000;
    var cuenta=0;
    var maxi = 2;
    
    function sumar(valor) {
    total += valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}		
    	}
    }
    
    function restar(box,valor) {
    cuenta++
    if (cuenta > maxi) {
      alert("El equipo no puede tener más de " + maxi + " jugadores");
      box.checked = false;
      --cuenta;
     }
    total-=valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}
    	}
    	
    if (total < 0) {
      alert("No hay más presupuesto");
     }
    
    }
    </script>
    <form name="equipo">
    <input name="jugadores[]" id="jugador-7" value="Leo Fernández" title="3600" type="checkbox" onclick="if (this.checked) restar(this,Number(this.title)); else sumar(Number(this.title))" />
    <input name="jugadores[]" id="jugador-8" value="José López"  title="5800" type="checkbox" onclick="if (this.checked) restar(this,Number(this.title)); else sumar(Number(this.title))" />
    <input name="jugadores[]" id="jugador-9" value="Juan Fulano"  title="100" type="checkbox" onclick="if (this.checked) restar(this,Number(this.title)); else sumar(Number(this.title))" />
    <input name="total" type="text" value="10000">
    </form>
    </body>
    </html>

  11. #11
    Join Date
    Nov 2010
    Posts
    1,084
    no... that doesn't work try this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <script type="text/javascript">
    var total=10000;
    
    var maxi = 2;
    
    function sumar(valor) {
    total += valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}		
    	}
    }
    
    function restar(box,valor) {
    var cuenta=0;
    total-=valor; 
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].checked==true){
    cuenta++
    if (cuenta > maxi) {
      alert("El equipo no puede tener más de " + maxi + " jugadores");
      box.checked = false;
      --cuenta;
      total+=valor;
     }
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}
    	}
    if (total < 0) {
      alert("No hay más presupuesto");
     }
    document.equipo.total.value=total;
    }
    </script>
    <form name="equipo">
    <input name="jugadores[]" id="jugador-7" value="Leo Fernández" title="3600" type="checkbox" onclick="if (this.checked) restar(this,Number(this.title)); else sumar(Number(this.title))" />
    <input name="jugadores[]" id="jugador-8" value="José López"  title="5800" type="checkbox" onclick="if (this.checked) restar(this,Number(this.title)); else sumar(Number(this.title))" />
    <input name="jugadores[]" id="jugador-9" value="Juan Fulano"  title="100" type="checkbox" onclick="if (this.checked) restar(this,Number(this.title)); else sumar(Number(this.title))" />
    <input name="total" type="text" value="10000">
    </form>
    </body>
    </html>

  12. #12
    Join Date
    Apr 2012
    Posts
    10
    Xela,

    The second code works perfect, thank you very much. Just to simulate I did something, I added two lines: one to disable all the checkboxes when the max numbers of players are reach and the other one is a counter of the selected checkboxes.

    Code:
    <script type="text/javascript">
    var total=10000;
    
    var maxi = 5;
    
    function sumar(valor) {
    total += valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}		
    	}
    }
    
    function restar(box,valor) {
    var cuenta=0;
    total-=valor; 
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].checked==true){
    cuenta++
     
    if (cuenta > maxi) {    
    alert("El equipo no puede tener más de " + maxi + " jugadores");
      cbs[i].disabled=true;
      box.disabled = true
      box.checked = false;
      
      --cuenta;
    
      total+=valor;
    
     }
    
     document.equipo.contador.value = cuenta;
     
      }
    
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}
    	}
    if (total < 0) {
      alert("No hay más presupuesto");
     }
    document.equipo.total.value=total;
    }
    </script>
    Again, thank you for your help and time. I was stuck with this problem for a few days and you solved in the best way.

    Cheers from Argentina!

  13. #13
    Join Date
    Apr 2012
    Posts
    10
    Hello again!


    I thought this code was finished but I've found another problem (hopefully the last one).

    I think the problem is simple. As I said before, I put a input to count the number of checkboxes selected. The input works fine when I select a checkbox (it goes up) but if I uncheck the number doesn't change. The problem is just with the input because the script does sum and subtract selected checkboxes correctly.

    Thank you in advance!

  14. #14
    Join Date
    Nov 2010
    Posts
    1,084
    I think the easiest is as follows:
    make "cuenta" a gloabl variable (so the sumar function can access it)

    subtract from the cuenta every time the sumar function runs, and update the contador value then:

    Code:
    <script type="text/javascript">
    var total=10000;
    var cuenta;
    var maxi = 5;
    
    function sumar(valor) {
    total += valor; 
    document.equipo.total.value=total;
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}		
    	}
     document.equipo.contador.value = --cuenta;
    	}
    
    function restar(box,valor) {
    cuenta=0;
    total-=valor; 
    cbs=document.equipo.getElementsByTagName("input")
    for (var i = 0; i < cbs.length; i++ ) {
    if(cbs[i].type=="checkbox"&&cbs[i].checked==true){
    cuenta++
     
    if (cuenta > maxi) {    
    alert("El equipo no puede tener más de " + maxi + " jugadores");
      cbs[i].disabled=true;
      box.disabled = true
      box.checked = false;
      
      --cuenta;
    
      total+=valor;
    
     }
    
     document.equipo.contador.value = cuenta;
     
      }
    
    if(cbs[i].type=="checkbox"&&cbs[i].title>total){
    cbs[i].disabled=true;
    		}
    if(cbs[i].type=="checkbox"&&cbs[i].title<total||cbs[i].checked==true){
    cbs[i].disabled=false;
    		}
    	}
    if (total < 0) {
      alert("No hay más presupuesto");
     }
    document.equipo.total.value=total;
    }
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles