Eine Schaltfläche ausblenden, wenn das Kontrollkästchen nicht ausgewählt ist

Ich möchte die Übermittlung in einer Formularschaltfläche ausblenden, sofern nicht mindestens eines der Kontrollkästchen aktiviert ist. Hier ist ein Beispiel aus meiner SichtEine Schaltfläche ausblenden, wenn das Kontrollkästchen nicht ausgewählt ist

$(document).ready(function() { 
 
    $('input[type=checkbox]').click(function() { 
 
    if ($("#radiobutton :checked") { 
 
     $('#next-container').toggle(); 
 
    } else { 
 
     $('#next-container').hide() 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 

 
<div id="nxtbutton"> 
 
    <div id="next-container"> 
 
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button> 
 
    </div> 
 
</div>

Quelle

2016-11-03 cazlouise

Überprüfen Sie die Länge der angekreuzte Kästchen in einem change Event-Handler, wenn überhaupt geprüft werden, zeigen die Schaltfläche

$(document).ready(function() { 
 
    var boxes = $(' input[type=checkbox]').on('change', function() { 
 
    var flag = boxes.filter(':checked').length > 0; 
 

 
    $('#next-container').toggle(flag); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<br /> 
 
<div id="nxtbutton"> 
 
    <div id="next-container"> 
 
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button> 
 
    </div> 
 
</div>

Quelle

2016-11-03 16:28:11 adeneo

Verwenden .prop('checked') auf Checkbox Taste zu prüfen, ob es aktiviert ist. Wiederholen Sie das Kontrollkästchen, wenn eines der Kontrollkästchen ein onchange-Ereignis aufweist und einen Zähler verwaltet.

$(document).ready(function(){ 
 
    
 
$('#nxtBtn').hide(); 
 
$(' input[type="checkbox"]').on('change', function() { 
 
    var count = 0; 
 
       $(' input[type="checkbox"]').each(function(){ 
 
       if($(this).prop('checked')) { 
 
        count++; 
 
        return; 
 
       } 
 
        
 
       }) 
 
       if(count > 0) { 
 
       $('#nxtBtn').show(); 
 
       } 
 
    else { 
 
     $('#nxtBtn').hide(); 
 
    } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<input type="checkbox" name="radio" /> 
 
<input type="checkbox" name="radio" /> 
 
<input type="checkbox" name="radio" /> 
 

 

 
    <div id="nxtbutton"> 
 
      <div id="next-container"> 
 
      <button class="card__btn btn" id="nxtBtn" type="button" >Next</button> 
 
      </div> 
 
      </div>

Quelle

2016-11-03 16:27:16

Sie die Notwendigkeit Schaltfläche, die ausgeblendet werden soll, wenn die Seite geladen wird.

JS

document.getElementById('nxtBtn').style.visibility = 'hidden';

visibility=hidden ist sehr nützlich, aber es wird immer noch Platz auf der Seite übernehmen. Sie können auch display=none

verwenden Oder versuchen Sie die CSS:

display:block oder display:none

Auch if($("#radiobutton :checked"){-if($("#radiobutton :checked")){ ändern. Du verpasst eine Klammer.

Quelle

2016-11-03 16:32:17 Zackh105

Ich benutze dies sehr auf meinen Seiten. Kurz und gut, aber alle Kundenseite.

$(document).ready(function(){ 
 
$('#nxtBtn').hide(); 
 
$('#radio').mouseup(function() { 
 
    $('#nxtBtn').toggle(); 
 
}); 
 
});

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<input type="checkbox" name="radio" id="radio"> 
 
<button class="card__btn btn" id="nxtBtn" type="button">Next</button>

Quelle

2016-11-03 16:36:37 rbreier

Eine Schaltfläche ausblenden, wenn das Kontrollkästchen nicht ausgewählt ist

Antwort

Verwandte Themen