Enabling or disabling buttons on certain events

Question

I need to run the following checks in two occasions:

1. When a certain modal is first shown or clicked,
2. When one of two inputs is filled.

How can I remove redundancy in the following code?

jQuery(document).ready( function($) {
    $(document.body).on( 'DOMNodeInserted click',  '.media-modal', function( event ) {
        var test = $('label.setting[data-setting=alt] input:visible').val();
        var test2 = $('input[data-setting=alt]:visible').val();
        if (!test && !test2) {
            $('.media-modal .media-button-insert').prop("disabled",true);
            $('.media-modal .media-button-select').prop("disabled",true);
        } else {
            $('.media-modal .media-button-insert').prop("disabled",false);
            $('.media-modal .media-button-select').prop("disabled",false);
        }
        $(document.body).on( 'input propertychange paste',  'label.setting[data-setting=alt] input, input[data-setting=alt]', function( event ) {
            var test = $('label.setting[data-setting=alt] input:visible').val();
            var test2 = $('input[data-setting=alt]:visible').val();
            if (!test && !test2) {
                $('.media-modal .media-button-insert').prop("disabled",true);
                $('.media-modal .media-button-select').prop("disabled",true);
            } else {
                $('.media-modal .media-button-insert').prop("disabled",false);
                $('.media-modal .media-button-select').prop("disabled",false);
            }
        });
    });
});

Answer 1

I would write it as something like:

jQuery(document).ready( function($) {

    function updateDisabled() {
        var test     = $('label.setting[data-setting=alt] input:visible').val();
        var test2    = $('input[data-setting=alt]:visible').val();
        var disabled = !test && !test2;
        $('.media-modal .media-button-insert').prop("disabled", disabled);
        $('.media-modal .media-button-select').prop("disabled", disabled);
    }   

    $(document.body).on( 'DOMNodeInserted click', '.media-modal', updateDisabled);
    $(document.body).on( 'input propertychange paste', 'label.setting[data-setting=alt] input, input[data-setting=alt]', updateDisabled);

}

You could also rewrite:

$('.media-modal .media-button-insert').prop("disabled", disabled);
$('.media-modal .media-button-select').prop("disabled", disabled);

As

$('.media-modal .media-button-insert, .media-modal .media-button-select').prop("disabled", disabled);

(Although I prefer keeping them separate) or maybe better giving your buttons an extra class and writing:

$('.media-modal .media-button').prop("disabled", disabled);

Answer 2

Marc's answer is pretty much what I would have posted, except his code differs from yours in that your input/paste/propertychange handler is not registered until after the node/click handler. He did that because yours is going to register that inner event handler over and over exponentially every time there's a click. You can fix that by removing the handler after it's no longer needed.

jQuery(document).ready( function($) {

    function updateDisabled() {
        var test     = $('label.setting[data-setting=alt] input:visible').val();
        var test2    = $('input[data-setting=alt]:visible').val();
        var disabled = !test && !test2;
        $('.media-modal .media-button-insert').prop("disabled", disabled);
        $('.media-modal .media-button-select').prop("disabled", disabled);
    }   

    $(document.body).on( 'DOMNodeInserted click', '.media-modal', function(){
        updateDisabled();
        $(document.body).on( 'input propertychange paste', 'label.setting[data-setting=alt] input, input[data-setting=alt]', function(){
            updateDisabled();
            $(document.body).off('input propertychange paste', 'label.setting[data-setting=alt] input, input[data-setting=alt]');
        });
    });

}