Inibire checkbox se un altro è selezionato

**bANART** · 26-10-2010, 09:07

Buongiorno a tutti!

Sono arrivato a dover sviluppare un pannello di controllo e al suo interno ha una sezione formata da una ventina di checkbox.

Dovrei fare in modo che se il primo checkbox è selezionato, tutti gli altri siano inibiti.
Di controparte, se uno qualsiasi, o più di uno, degli altri checkbox (che non sia il primo) è selezionato, il primo sia inibito.

Ho provato a cercare in internet e sul forum ma non ho trovato nulla (forse sbagli termini), sapreste aiutarmi a realizzarlo?

Graziegrazie

**antotan** · 26-10-2010, 22:28

Se usi JQuery ti viene abbastanza facile. Puoi usare degli id (o degli attributi in generale) e sfruttare i selettori:

codice:

<html>	
   <head>   
      <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>		
		<script>
		   $(document).ready(function()
		   {
			   $("#cb1").click(function()
				{
				   var cb1 = $(this);
				   var disabled = null;
				   
				   if (cb1.is(":checked"))
				   {					
					   disabled = "disabled";
				   }					
				   else 
				   {
					   disabled = "";
					}
					
					$.each($("input[id^=\"cb\"]"), function()
					{
						if($(this).attr("id") != cb1.attr("id"))
						{							
						   $(this).attr("disabled", disabled);  
						}
					});
				});

				$("input[id^=\"cb\"]").change(function()
				{
					var anyChecked = false;
					
					if($(this).attr("id") != "cb1")
					{
						if($(this).is(":checked"))
						{
						   $("#cb1").attr("disabled", "disabled");
						   return;
						}

	               $.each($("input[id^=\"cb\"]"), function()
	               {
	                  if($(this).attr("id") != "cb1" && $(this).is(":checked"))
	                  {        
		                  anyChecked = true;           
	                     return;
	                  }
	               });

	               if(!anyChecked)
	               {
	            	  $("#cb1").attr("disabled", "");
		            }
	               else
	               {
		               
	            	   $("#cb1").attr("disabled", "disabled");
			         }
					}
				});
		   });
		</script>
	</head>
	<body>
      <input type="checkbox" id="cb1"/>1 

      <input type="checkbox" id="cb2"/>2 

      <input type="checkbox" id="cb3"/>3 

      <input type="checkbox" id="cb4"/>4 

      <input type="checkbox" id="cb5"/>5 
      
	</body>
</html>

Se non usi JQuery, devi crearti tu lo strato di selezione, il resto rimane simile.

**bANART** · 26-10-2010, 22:56

Wow!!!
L'ho provato un attimo al volo e sembra molto valido!
Oddio, di js non ne so molto, e non c'ho capito molto, me lo devo studiare un attimo... ma domani perchè ora sono cotto!

Dici che se volessi aggiungere un altro cb che inidisce tutti gli altri o solo alcuni altri diventa una cosa complicata?

Ad ogni modo sei stato gentilissimo, domani lo studio meglio! Grazie mille, buonanotte!

**antotan** · 27-10-2010, 07:09

Dici che se volessi aggiungere un altro cb che inidisce tutti gli altri o solo alcuni altri diventa una cosa complicata?

Nel primo caso ti basta utilizzare la prima parte del codice, nel secondo devi modificarla appena appena. In generale no, non dovrebbe complicare la situazione

**bANART** · 30-10-2010, 00:18

Antotan, posso chiederti un'altra cosa in merito a questa discussione?

Visto che quando vengono disabilitati i checkbox non si distinguono da quelli attivi avevo pensato di cambiare il colore delle scritte che li nominano. (primo, secondo, ... )

avevo pensato di aggiungere un attributo style="color:#999999" identificando i div con un id, ma ho fatto solo un gran casino.

Codice PHP:


<div id="lb1">

   <input type="checkbox" id="cb1"/>

   primo

</div>

<div id="lb2">

   <input type="checkbox" id="cb2"/>

   secondo

</div>

<div id="lb3">

   <input type="checkbox" id="cb3"/>

   terzo

</div>

<div id="lb4">

   <input type="checkbox" id="cb4"/>

   quarto

</div>

<div id="lb5">

   <input type="checkbox" id="cb5"/>

   quinto

</div>

Se non è troppo disturbo (visto che non c'ho capito una mazza) mi aiuteresti a modificare lo script che mi hai creato?

Grazie mille

**antotan** · 30-10-2010, 11:44

Ciao, in pratica è lo stesso di prima:

Codice PHP:


<html>   

   <head>   

      <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>      

      <script>

         $(document).ready(function()

         {

            $("#cb1").click(function() // evento causato da click sulla prima checkbox

            {

               var cb1 = $(this);

               var disabled = null;

               

               if (cb1.is(":checked")) // se la checkbox è abilitata...

               {              

                  disabled = "disabled"; // ...indico che le altre devono essere disabilitate

               }              

               else // altrimenti...

               {

                  disabled = ""; // ...indico che devono essere abilitate

               } // al termine di questa if, ho che se la checkbox 1 è checkata, disabilito tutti

                 // con il foreach che segue, altrimenti li abilito tutti



               // per ogni input con id che comincia con 'cb'

               // che rispettano quindi il pattern ^=cb

               // [url]http://api.jquery.com/category/selectors/[/url]

               $.each($("input[id^=\"cb\"]"), function() 

               {

                  // se l'id dell'input attuale, dell'insieme su cui sto iterando,

                  // è diverso da quello della checkbox 1 (quella che disabilitat tutti)...

                  if($(this).attr("id") != cb1.attr("id"))

                  {                     

                     // disabilito/abilito questo input, in accordo con l'if di prima                     

                     $(this).attr("disabled", disabled);                     

                     if(disabled == "disabled") // se ho disabilitato l'input...

                     {                         

                           // ...allora prendo il parent e gli dico che il colore del testo sarà rosso

                           $(this).parent("div").css("color", "red");

                     } 

                     else // se ho abilitato tutti l'input...

                     {

                         // ...allora prendo il parent e gli dico che il colore del testo sarà nero

                           $(this).parent("div").css("color", "black");

                     }

                  }

               });

            });



            $("input[id^=\"cb\"]").change(function()

            {

               var anyChecked = false;

               

               if($(this).attr("id") != "cb1")

               {

                  if($(this).is(":checked"))

                  {

                     $("#cb1").attr("disabled", "disabled");

                     $("#cb1").parent("div").css("color", "red");

                     return;

                  }



                  $.each($("input[id^=\"cb\"]"), function()

                  {

                     if($(this).attr("id") != "cb1" && $(this).is(":checked"))

                     {        

                        anyChecked = true;           

                        return;

                     }

                  });



                  if(!anyChecked)

                  {

                    $("#cb1").attr("disabled", "");

                    $("#cb1").parent("div").css("color", "black");

                  }

                  else

                  {

                     

                     $("#cb1").attr("disabled", "disabled");

                     $("#cb1").parent("div").css("color", "red");

                  }

               }

            });

         });

      </script>

   </head>

   <body>

        <div> 

           <input type="checkbox" id="cb1"/> 

           primo 

        </div> 

        <div> 

           <input type="checkbox" id="cb2"/> 

           secondo 

        </div> 

        <div> 

           <input type="checkbox" id="cb3"/> 

           terzo 

        </div> 

        <div> 

           <input type="checkbox" id="cb4"/> 

           quarto 

        </div> 

        <div> 

           <input type="checkbox" id="cb5"/> 

           quinto 

        </div>    

   </body>

</html>

Nota che non ho avuto bisogno che i div avessero un id.

**bANART** · 30-10-2010, 14:23

Guarda... non so come ringraziarti, se gentilissimo.
Ora sono a casa dei miei e non riesco a provare lo script... appena torno a casa mia lo implemento e ti dico...

Grazie ancora!!

**bANART** · 02-11-2010, 12:02

Ciao Antotan,
solo oggi sono riuscito a provare il tuo script.
E' formidabile, utilissimo, e grazie mille anche per i commenti che lo spiegano...
io da solo non sarei mai riuscito a crearlo.

Grazie ancora.

**bANART** · 02-11-2010, 16:32

Caspita, problema!

Il form è collegato ad un controllo in php collegato ad un database, il quale pesca i dati da una tabella e preseleziona le caselle con valore 1.

Tradotto in html alcuni checkbox si trovano già selezionati se dal database passa una determinata informazione.

In altre parole, al caricamento della pagiana, potrei avere un form (fatto di checkbox) di questo tipo:

Codice PHP:


<div> 

  <input type="checkbox" id="cb1" checked/> 

     primo 

  </div> 

  <div> 

      <input type="checkbox" id="cb2"/> 

      secondo 

   </div> 

   <div> 

      <input type="checkbox" id="cb3"/> 

      terzo 

   </div> 

   <div> 

      <input type="checkbox" id="cb4"/> 

      quarto 

   </div> 

   <div> 

      <input type="checkbox" id="cb5"/> 

      quinto 

   </div>

Ora, essendo il primo selezionato dovrebbe colorarmi di rosso e inibire gli altri, invece non va.
Solo se si agisce al momento sul checkbox colora e inibisce.

C'è un modo per colorare e inibire, come da funzionamento che tu hai grandiosamente formulato, già in partenza all'apertura della pagina, in base ai checkbox preselezionati?

Grazie e scusami per il disturbo, manca solo questo per queste caselline!

**antotan** · 02-11-2010, 20:55

Se noti, la funzione che uso per inibire le cb la puoi usare pure all'inizio. Infatti la rendo non anonima e la richiamo all'inizio:

codice:

<html>    
   <head>    
      <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>       
      <script> 
         $(document).ready(function() 
         { 
        	   function firstCbClick(cb)
        	   {
               var cb1 = cb; 
               var disabled = null; 
                
               if (cb1.is(":checked")) 
               {                                 
                  disabled = "disabled"; 
               }               
               else 
               { 
                  disabled = ""; 
               }  
 
               $.each($("input[id^=\"cb\"]"), function()  
               {  
                  if($(this).attr("id") != cb1.attr("id")) 
                  {                                    
                     $(this).attr("disabled", disabled);                      
                     if(disabled == "disabled") 
                     {                           
                           $(this).parent("div").css("color", "red"); 
                     }  
                     else 
                     {  
                           $(this).parent("div").css("color", "black"); 
                     } 
                  } 
               }); 
            }

            function otherCbClick(cb)
            {
	            var anyChecked = false; 
	            if(cb.attr("id") != "cb1") 
	            { 
	               if(cb.is(":checked")) 
	               { 
	                  $("#cb1").attr("disabled", "disabled"); 
	                  $("#cb1").parent("div").css("color", "red"); 
	                  return; 
	               } 
	
	               $.each($("input[id^=\"cb\"]"), function() 
	               { 
	                  if($(this).attr("id") != "cb1" && $(this).is(":checked")) 
	                  {         
	                     anyChecked = true;            
	                     return; 
	                  } 
	               }); 

	               if(!anyChecked) 
	               { 
	                 $("#cb1").attr("disabled", ""); 
	                 $("#cb1").parent("div").css("color", "black"); 
	               } 
	               else 
	               { 	                   
	                  $("#cb1").attr("disabled", "disabled"); 
	                  $("#cb1").parent("div").css("color", "red"); 
	               } 
	            }
            }
             
            $("#cb1").click(function() 
            { 
               firstCbClick($(this));
            }); 

            $("input[id^=\"cb\"]").change(function() 
            { 
               otherCbClick($(this)); 
            }); 
            //
            // Controllo iniziale
            //
            var cbs = $("input[id^=\"cb\"]");
            for(var i = 0; i < cbs.length; i++)
            {
               if($(cbs[i]).is(":checked"))
               {
                  if($(cbs[i]).attr("id") == "cb1")
                	  firstCbClick($(cbs[i]));
                  else
                	  otherCbClick($(cbs[i]));
            	   break;
               }
            }
         }); 
      </script> 
   </head> 
   <body> 
        <div>  
           <input type="checkbox" id="cb1" checked="checked"/>  
           primo  
        </div>  
        <div>  
           <input type="checkbox" id="cb2"/>  
           secondo  
        </div>  
        <div>  
           <input type="checkbox" id="cb3"/>  
           terzo  
        </div>  
        <div>  
           <input type="checkbox" id="cb4"/>  
           quarto  
        </div>  
        <div>  
           <input type="checkbox" id="cb5"/>  
           quinto  
        </div>     
   </body> 
</html>

Ho fatto due test, uno tenendo checkata la cb1 e uno tenendo la cb2.
Prova a vedere se va.

Discussione: Inibire checkbox se un altro è selezionato

Strumenti discussione

Ricerca discussione

Visualizza

Inibire checkbox se un altro è selezionato

Permessi di invio