これらの機能を短くすることは可能ですか

Question

私はそこに3つの機能を作成します。私はそれを短くするか、あるいは一つの機能に結合することを考えています。出来ますか？
ここに私のコードです！

$(function(){ 
    $(".js-disable-form").on("submit", function() { 
     $('#loading-modal').modal('show'); 
     $(this).find("input[type=submit]").prop('disabled', true); 
    }) 

    $(".js-disable-form-approval").on("submit", function() { 
     var res = confirm("入力内容で承認します。よろしいですか？"); 
     if (res == true) { 
      $('#loading-modal').modal('show'); 
      $(this).find("input[type=submit]").prop('disabled', true); 
     } else { 
      return false; 
     } 
    }) 

    $(".js-disable-form-individual").on("submit", function() { 
     $(this).find("input[type=submit]").prop('disabled', true); 
    }) 

    $('.js-disable-btn').on("click", function() { 
     $('#loading-modal').modal('show'); 
    }) 
}); 

Answer 1

これはそれを行う必要があります：

function showModal() { $('#loading-modal').modal('show'); } 

function disableSubmit() { $(".js-disable-form input[type=submit]").prop('disabled', true); } 

$(function() { 
    $(".js-disable-form").on("submit", function() { 
    showModal(); 
    disableSubmit(); 
    }); 

    $(".js-disable-form-approval").on("submit", function() { 
    if (confirm("入力内容で承認します。よろしいですか？")) { 
     showModal(); 
     disableSubmit(); 
    } else return false; 
    }); 

    $(".js-disable-form-individual").on("submit", disableSubmit); 
    $('.js-disable-btn').on("click", showModal); 
}); 

これは元のコードよりもはるかに短いではなくはずですが、少なくとも1つの機能にすべてのイベントハンドラを置くことができ

$(function(){ 
    $(".js-disable-form").on("submit", function() { 
    $('#loading-modal').modal('show'); 
    $(this).find("input[type=submit]").prop('disabled', true); 
    }) 
}); 

$(function(){ 
    $(".js-disable-form-approval").on("submit", function() { 
    var res = confirm("入力内容で承認します。よろしいですか？"); 
    if (res == true) { 
     $('#loading-modal').modal('show'); 
     $(this).find("input[type=submit]").prop('disabled', true); 
    } else { 
    return false; 
     } 
    }) 
}); 

$(function(){ 
    $(".js-disable-form-individual").on("submit", function() { 
    $(this).find("input[type=submit]").prop('disabled', true); 
    }) 
    $('.js-disable-btn').on("click", function() { 
    $('#loading-modal').modal('show'); 
    }) 
}); 

Answer 2

一般的に重複するコードを避ける方法を示します。付属のHTMLコードがありませんので、

Answer 3

$('[class^=".js-disable-"').on("submit", function(){ 
    if ($(this).className.indexOf("individual") >= 0 || $(this).className.indexOf("form") >=0){ 
     $(this).find("input[type=submit]").prop('disabled', true); 
     if ($(this).className.indexOf("individual") >= 0){  
      $('.js-disable-btn').on("click", function() { 
       $('#loading-modal').modal('show'); 
      }) 
     } 
     else{ 
      $('#loading-modal').modal('show'); 
     } 
    } 
    else { 
     var res = confirm("入力内容で承認します。よろしいですか？"); 
     if (res == true) { 
      $('#loading-modal').modal('show'); 
      $(this).find("input[type=submit]").prop('disabled', true); 
     } 
     else { 
      return false; 
     } 
    } 
}); 

はテストしていません。基本的には、.js-disable-で始まるクラスと一致し、submitイベントを付加します。次に、あなたの機能を並べ替えるだけです。