CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede Den_nemme Nybegynder
26. februar 2016 - 21:50 Der er 12 kommentarer og
1 løsning

Knap skal være deaktiveret indtil et bestemt antal checkboxe i flere grupper er valgt.

Hej
Jeg håber at nogen kan hjælpe mig? Jeg har en side med flere grupper af checkboxe og skal være sikker på, at brugeren vælger et bestemt antal chckboxe i hver gruppe, før vedkommende trykker send.
Dette script - http://jsfiddle.net/chriscoyier/bphze/76/ - virker perfekt, men hvordan får jeg det til at virke på flere grupper af checkboxe?
Avatar billede olsensweb.dk Ekspert
27. februar 2016 - 01:40 #1
kig på denne
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>  
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  <script>
    $(function() {    
        submitButt = $("input[type='submit']");
          $( "#frm" ).change(function() {        
                var option_antal  = $("input:checkbox[name='option[]']:checked").length;
                var option_antal1 = $('input[name="option1[]"]:checked').length;
                
                if(option_antal > 2 && option_antal1 > 1 ){
                    submitButt.attr("disabled", false);
                }
                else{
                    submitButt.attr("disabled", true);
                }  
        });
    });
  </script>
</head>
<body>

<h1>Button should be enabled if at least one checkbox is checked</h1>

<form id="frm">
    <input type="checkbox" name="option[]" > <label for="option-1">Option 1</label><br>
    <input type="checkbox" name="option[]" > <label for="option-2">Option 2</label><br>
    <input type="checkbox" name="option[]" > <label for="option-3">Option 3</label><br>
    <input type="checkbox" name="option[]" > <label for="option-4">Option 4</label><br>
    <input type="checkbox" name="option[]" > <label for="option-5">Option 5</label><br>
    
    <input type="checkbox" name="option1[]" > <label for="option-11">Option 11</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-12">Option 12</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-13">Option 13</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-14">Option 14</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-15">Option 15</label><br>
    
    <input type="submit" value="Do thing" disabled>
</form>
</body>
</html>
Avatar billede Den_nemme Nybegynder
27. februar 2016 - 06:33 #2
Hej ronols
Knappen lader til at være disabled uanset hvor mange valg jeg laver. Jeg har prøvet i både Firefox, Chrome og IE.
Avatar billede Den_nemme Nybegynder
27. februar 2016 - 07:44 #3
Jeg spekulerer på, om scriptet nedenfor kan ændres så det kan bruges på flere grupper? Det giver nemlig mulighed for at styre  præcis hvor mange valg brugeren skal foretage :-)

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
    HandleCheckboxSelection();
});

$("input:checkbox").click(function() {
    HandleCheckboxSelection();
});

function GetSelectedCheckboxCount() {
    var selectedCheckboxCount = 0;
    $("input:checkbox").each(function() {
        if ($(this).is(":checked")) {
            selectedCheckboxCount++;
        }
    });
   
    return selectedCheckboxCount;
}

function HandleCheckboxSelection() {
   
    if (GetSelectedCheckboxCount() == 3) {
        $(".samplePromo").removeAttr("disabled");
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                $(this).removeAttr("disabled");
            }
            else {
                $(this).attr("disabled", "true");
            }
        });
    }
    else {
        $(".samplePromo").attr("disabled", "true");
        $("input:checkbox").each(function() {
            $(this).removeAttr("disabled");
        });   
    }
}
});//]]> 

</script>
Avatar billede olsensweb.dk Ekspert
27. februar 2016 - 09:54 #4
#2
prøv at vælge mere end 2 i option 1-5 og mere end 1 i option 11-15
så denne betingelse bliver sand
if(option_antal > 2 && option_antal1> 1 )


men prøv at bruge browserens debug (F12) det kunne være der stod noget i console.log
det kunne være du ikke får indlæst jquery.

demo http://experten.olsensweb.dk/1009344/test.html
Avatar billede Wally73 Mester
27. februar 2016 - 09:55 #5
Tror det vil være nok at ændre din .change fra din form til dine inputs i stedet for.
Avatar billede Den_nemme Nybegynder
27. februar 2016 - 14:07 #6
Console:
Failed to load resource: the server responded with a status of 404 (Not Found)
Jeg kan godt se, at din demo virker, men jeg kan ikke selv få den til det...
Hvad nu hvis jeg gerne vil have den til at disable øvrige checkboxe i gruppen når det ønskede antal er valgt? Kan det lade sig gøre?
Avatar billede Wally73 Mester
27. februar 2016 - 16:08 #7
Fik vist ikke læst dit spørgsmål rigtigt i første omgang.

Linjen "var option_antal=$("input:checkbox[name='option[]']:checked").length;" sætter variablen option_antal lig med det antal checkbox med attributten name=option[], som er markeret.

Lav flere checkboxe og giv dem et name-attribut,der svarer til deres gruppe og lav så flere af de linjer i dit script, hvor du ændrer option[] til det navn du har valgt.

Nu har du så værdierne og skal så bare lave en rette din if-sætning til i scriptet.
Avatar billede olsensweb.dk Ekspert
27. februar 2016 - 16:09 #8
>Failed to load resource: the server responded with a status of 404 (Not Found)
prøv at ligge din demo online.
eller load jquery localt istedet fra nettet.

jeg afvikler siden fra localhost, og ikke bare ved at klikke på html filen, da denne ellers vil bliver indlæst som file:


>Hvad nu hvis jeg gerne vil have den til at disable øvrige checkboxe i gruppen når det ønskede antal er valgt? Kan det lade sig gøre?

kig på denne (kan optimeres)
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>  
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  <script>
    $(function() {    
        var submitButt = $("input[type='submit']");
        
        $( "#frm" ).change(function() {        
            var status_option_antal0 = false;
            var status_option_antal1 = false;
            
            var option_antal0 = $("input:checkbox[name='option0[]']:checked").length;
            var option_antal1 = $('input[name="option1[]"]:checked').length;    

            
            if(option_antal0 > 2){
                status_option_antal0 = true;                
                
                $('input[name="option0[]"').each(function (index, value){            
                    if(value.checked==false){
                        value.disabled=true;                                                
                    }                        
                });                 
            }            
            else{
                // enabler alle checkboxe
                $('input[name="option0[]"').each(function (index, value){                                
                        value.disabled=false;                                            
                });                             
            }

                
            if(option_antal1 > 1){
                status_option_antal1 = true;                
                
                $('input[name="option1[]"').each(function (index, value){            
                    if(value.checked==false){
                        value.disabled=true;                                                
                    }                        
                });                 
            }            
            else{
                // enabler alle checkboxe
                $('input[name="option1[]"').each(function (index, value){                                
                        value.disabled=false;                                            
                });                             
            }    
            
            var status = (status_option_antal0 && status_option_antal1 )? false : true;
            submitButt.attr("disabled", status);
            

        });
    });
  </script>
</head>
<body>
<form id="frm" >
    <input type="checkbox" name="option0[]" > <label for="option-1">Option 1</label><br>
    <input type="checkbox" name="option0[]" > <label for="option-2">Option 2</label><br>
    <input type="checkbox" name="option0[]" > <label for="option-3">Option 3</label><br>
    <input type="checkbox" name="option0[]" > <label for="option-4">Option 4</label><br>
    <input type="checkbox" name="option0[]" > <label for="option-5">Option 5</label><br>
    <br>    
    <input type="checkbox" name="option1[]" > <label for="option-11">Option 11</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-12">Option 12</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-13">Option 13</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-14">Option 14</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-15">Option 15</label><br>
    <input type="checkbox" name="option1[]" > <label for="option-16">Option 16</label><br>
    
    
    <input type="submit" value="Do thing" disabled>
</form>
</body>
</html>

demo http://experten.olsensweb.dk/1009344/test1.html
Avatar billede starter Praktikant
27. februar 2016 - 16:54 #9
ronols: Jeg forstår det simpelthen ikke. Hvis jeg ligger den på mint eget domæne hos one.com så virker det fint, men hvis jeg ligger det mit arbejdes server, så virker det ikke... Hvordan kan det være?
Avatar billede olsensweb.dk Ekspert
27. februar 2016 - 17:17 #10
prøv at hente den ned localt fra
http://jquery.com/download/
direkte link http://code.jquery.com/jquery-1.12.1.min.js

og ret
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

til

<script src="jquery-1.12.1.min.js"></script>
Avatar billede starter Praktikant
27. februar 2016 - 17:30 #11
Det virker desværre heller ikke :'(
Avatar billede Den_nemme Nybegynder
12. marts 2016 - 10:15 #12
Undskyld! Jeg har fuldstændig glemt denne tråd &#128559;
Ronols vil du lægge et svar, så jeg kan komme af med point og lukker tråden? &#128521;
Avatar billede olsensweb.dk Ekspert
12. marts 2016 - 10:21 #13
får du her
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:53 CD Burner XP (Sætte den til at optage nogle numre fra en CD - Men ikke alle ? Af Ikke-ekspert i Musik & videoafspillere
I går 17:42 Katastrofe med Pc Af LilBe i PC
I går 09:44 Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
24/1216:03 Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43 html <Input.. Danske bogstaver Af pjotre i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer
Læs mere »
Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter
Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret
Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge
Se alle »
Computerworld
Teaser billede
Netværkstest: Første mesh-sæt med komplette WiFi 7-features sætter nye rekorder for dækning og hastighed
Læs mere »
Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder
Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR
Nørgaard: Copilot scorer pænt højt i min kendte 3D-test (Dyrt, Dumt, Dårligt)
Se alle »
CIO
Teaser billede
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Læs mere »
En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed
AI er et falmende buzzword: Lad mig fluks dele en god og en dårlig nyhed
TV 2 indsætter tidligere specialist i Forsvarets Efterretningstjeneste og hos KMD som ny CISO
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Merete Søby klar med nyt top-job efter pludselig exit fra Schultz: Her er hendes nye job
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Se alle »
White paper
Teaser billede
Cyberangreb bliver mere kostbare: Er du forberedt?
Læs mere »
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Managed Detection & Response: Forsvar din virksomhed mod cybertrusler døgnet rundt
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »