Show submit button if checked

问题

I need to hide the submit button if none checkboxes is checked. if at least one is checked the submit button should be displayed. I use JQuery.

<input type="checkbox" name="prog" value="1">
<input type="checkbox" name="prog" value="2">

<input type="submit" id="submit_prog" value='Submit' />

EDIT

How can I combine it with a "check all" checkbox?

回答1:

$(document).ready(function() {

    var $submit = $("#submit_prog").hide(),
        $cbs = $('input[name="prog"]').click(function() {
            $submit.toggle( $cbs.is(":checked") );
        });

});

Demo: http://jsfiddle.net/QMtey/1/

The .toggle() method accepts a boolean for whether to show or hide.

回答2:

I'll do you one better! You can do this with just css.

input[type=submit] {
  display:none;
}

input[type=checkbox]:checked ~ input[type=submit] {
  display:block;
}

Heres a demo: http://jsfiddle.net/5wASK/

回答3:

with the following code when the user check some the button will appear and when uncheck all it will hide again.

jQuery('[name="prog"]').click(function(){
    if (jQuery('[name="prog"]:checked').length > 0)    
        jQuery('#submit_prog').show();
    else jQuery('#submit_prog').hide();
});

回答4:

var $checkboxes = $('input[type=checkbox]');

$checkboxes.on('change', function() {
   $('#submit_prog').prop('disabled', !($checkboxes.length == $checkboxes.filter(':checked').length));
});

The idea is that you JavaScript to check if the amount of checkboxes matches the amount of checked checkboxes. The ! flips it and sets the submit button's disabled property.

回答5:

$('input[name="prog"]').change(function(){
    var submitBtn=$('#submit_prog');
    if ($('input[name="prog"]:checked').length > 0) {
        submitBtn.show();
    } else {
        submitBtn.hide();
    }
});

回答6:

Use toggle to hide and show the element.

$("input[name='prog']").on("change",function(){
        $("#submit_prog").toggle();
});

来源：https://stackoverflow.com/questions/16209679/show-submit-button-if-checked

标签

javascript

jquery

html

checkbox