변경 라디오 버튼 상태 표시 제출 버튼 ... 어떻게?

Question

라디오 버튼 값이 변경된 경우에만 제출 버튼을 표시하려고합니다. 라디오 그룹이 여러 개있을 것이며 라디오 버튼이 변경되면 버튼이 나타납니다! 또한 라디오 버튼 그룹 값이 기본값으로 설정되면 제출 버튼이 다시 숨겨집니다.

$("form :radio").live('change',function(){ 

}); 

내 새로운 코드 :

//hide the submit button on load 
     $('form :submit').hide(); 

     //Data structure where the initial value from radio button(s) will be stored 
     var dbRadios = []; 

     //Getting the initial values from the radio button(s) and load them to the data structure 
     $("form :radio:checked").each(function() { 
      dbRadios.push($(this).attr('value')); 
     }); 


     //Attach onclick event to radio button(s) 
     $('form :radio').click(function() { 

      //The event fired, therefore the "New value(s)" (radio button value(s)) will be stored in the data sctructure 
      var submitedRadios = []; 

      //Geting the values from checked radio buttons 
      $("form :radio:checked").each(function() { 
       submitedRadios.push($(this).attr('value')); 
      }); 

      //Now comparing both data structures 
      if(dbRadios.compare(submitedRadios)){ 
       $('form :submit').fadeOut('slow'); 
      }else{ 
       $('form :submit').fadeIn('slow', function(){ ACTION! WILL BE EXECUTED MANY TIMES AS BUTTONS CLICKED}); 
      } 

     }); 


     $("form").submit(function() { 
     //AJAX GOES HERE! 
     alert("a submeter dados"); 
     }) 

비교 기능 :

//Compare two different arrays 
    Array.prototype.compare = function(testArr) { 
     if (this.length != testArr.length) return false; 
     for (var i = 0; i < testArr.length; i++) { 
     if (this[i].compare) { 
      if (!this[i].compare(testArr[i])) return false; 
     } 
     if (this[i] !== testArr[i]) return false; 
     } 
     return true; 
    } 

Answer 1

멋진 작품입니다!

//Attach onclick event to radio button(s) 
     $('form :radio').click(function() { 
      //Every new event clears the array so the new values can be stored properly 
      submitedRadios = []; 
      //Geting the values from checked radio buttons every time the state modifies 
      $("form :radio:checked").each(function() { 
       submitedRadios.push($(this).attr('value')); 
      }); 

      //Now comparing both data structures, if equal submit button hides, else shows 
      if(dbRadios.compare(submitedRadios)){ 
       $('form :submit').fadeOut('slow'); 
      }else{ 
       $('form :submit').fadeIn('slow'); 
      } 
     }); 

Answer 2

당신이 볼 수있는 온 클릭 내부 로직과 온 클릭 바인딩을 시도 할 수는 다른

Answer 3

당신 경우 다음과 같은 것을 시도 할 수 있습니다. 요구 사항을 충족시키기 위해보다 구체적인 논리를 작성할 수 있습니다.

$(document).ready(function() { 

    //hide the submit button on load 
    $('form :submit').hide(); 

    var defaultVal = 'default'; 

    //attach onchange event to radio buttons 
    $('form :radio').change(function() { 
     var val = $(this).val(); 

     if(val!=defaultVal) { 
     $('form :submit').show(); 
     } else { 
     $('form :submit').hide(); 
     } 
    }); 

}); 

위의 코드는/보여 클릭/변경된 라디오 버튼의 현재 값에 따라 제출 '버튼을 숨 깁니다.