CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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?

Synes godt om

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>

Synes godt om

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.

Synes godt om

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>

Synes godt om

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

Synes godt om

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.

Synes godt om

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?

Synes godt om

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.

Synes godt om

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

Synes godt om

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?

Synes godt om

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>

Synes godt om

starter Praktikant

27. februar 2016 - 17:30 #11

Det virker desværre heller ikke :'(

Synes godt om

Den_nemme Nybegynder

12. marts 2016 - 10:15 #12

Undskyld! Jeg har fuldstændig glemt denne tråd 😯
Ronols vil du lægge et svar, så jeg kan komme af med point og lukker tråden? 😉

Synes godt om

olsensweb.dk Ekspert

12. marts 2016 - 10:21 #13

får du her

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS

17/05

Test: Motorolas lækre nye toptelefon er skarpt prissat – men den gemmer på en gevaldig bommert

17/05

Her er de nye medlemmer af Statens It-råd: Skal vurdere it-projekter på over 15 millioner kroner

17/05

Antallet af anmeldelser af ulovligt indhold på beskedtjenester stiger: Regeringen skubber ansvaret videre til EU og Belgien

17/05

Nørgaard: Det kendte pekingeser-fænomen kunne alligevel ikke føre os til sejr i melodi grand prix

17/05

Tredje gang på under en uge: Google retter alvorlig sårbarhed i Chrome-browseren

17/05

Efter masser af kritik af store prisstigninger: VMware åbner for gratis licenser - ændrer i licens-strukturen

17/05

Google hælder masser af privacy og sikkerhed i Android 15-opdatering

17/05

Seks store selskaber med på årets image-liste for første gang: Kæmper alle med lav kendskabsgrad

17/05

Vi har fundet 10 spændende it-job, som du kan søge lige nu

17/05

Netcompany i gang med at positionere sig som leverandør af nyt centralnerve-system til det danske forsvar

17/05

Film: Andy Serkis vender tilbage som Gollum

Vis flere artikler

IT-JOB

DSV

Senior Cloud Engineer

Styrelsen For It og Læring

It-driftsmedarbejder søges til specialiseret applikationsdriftsteam

Udviklings- og Forenklingsstyrelsen

Erfarne løsningsarkitekter til stort og komplekst systemlandskab

DSV

IT Specialist and Consultant for SAP S/4HANA

NRGi

GIS-konsulent

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 09:13	Antivirus til en Linux Mint computer? Af Polle i Linux
I går 15:30	signalforstærker til trådløs rutrer tænkes brugt til pc næt pc -og MÅSKE TV 4 m borte eller begge Af Novice-1 i Routere & Switches
I går 11:43	Hvilket styresystem på en gammel Pc ??? Af Jan Post i Andre styresystemer
I går 07:44	Virus advarsler - falske Af jdann i Backup- & Antivirus
17/0519:32	Formler der blev væk Af Klaus W i Excel