양식 필드가 수정되지 않은 경우 jQuery에서 제출 버튼을 비활성화하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/881144

문제

텍스트 필드, 확인란, 라디오 부트 턴 및 제출 버튼이 포함 된 HTML 양식이 있습니다.

해당 제출 버튼이 필드의 내용이 수정 된 경우에만 활성화됩니다. 이제 여기에 캐치가 있습니다. 사용자가 필드 내용을 원래 값으로 다시 수정하면 양식 버튼을 다시 비활성화해야합니다.

  1. 원래 필드 값 "foo"=> 제출 버튼이 비활성화되었습니다.
  2. 사용자를 필드 값으로 변경하면 "bar"=> 제출 버튼이 활성화됩니다.
  3. 사용자가 필드 값을 "foo"=> 제출 버튼으로 다시 비활성화합니다.

이것을 달성하는 방법 jQuery? 어떤 형태로든 사용할 수있는 일반적인 솔루션이나 스크립트가 있습니까?

편집 : 간단한 더러운 상태 추적으로 제가 요구하는 것은 할 수 없습니다.

도움이 되었습니까?

해결책

더러운 상태 추적을 사용하십시오. 모든 입력 제어에 부울 값 (예 : isdirty)을 부착하고 값이 변경 될 때마다이를 전환하십시오. 양식을 제출하는 동안 적어도 하나 이상의 값이 변경되었는지 확인한 다음 양식을 제출하십시오. 그렇지 않으면 사용자에게 경고를 표시합니다.

또 다른 해결책은 컨트롤 값이 변경 될 때마다 공통 기능을 호출하는 것입니다. 이 기능에서는 무언가가 변경된 경우 글로벌 변수 (isdirty)를 True로 설정하고 제출 버튼을 활성화/비활성화 할 수 있습니다.

var isDirty = false;

function SomethingChanged(){
     if( !isDirty ) isDirty = true;
     btnSubmit.disabled = !isDirty;
}

모든 컨트롤을위한 일반적인 기능

가정 : 각 컨트롤의 초기 값을 속성 "initval"에 추가합니다.

function SomethingChanged(control){
     if( control.value != control.InitVal )
          control.IsDirty = true;
     else
          control.IsDirty = false;
}

위의 기능에서 일반적인 기능에서는 TextBoxChanged 및 DropdownChanged와 같은 각 유형의 컨트롤에 대해 별도의 기능을 가질 수 있지만 각 컨트롤에 다음 두 가지 속성이 있습니다.

  1. initValue- 제어의 초기 값
  2. ISDIRTY- 통제의 가치가 변경되었음을 나타내는 부울 가치

다른 팁

단지 두 단계 :

  1. JavaScript 변수에 모든 초기 값의 해시를 저장
  2. 모든 입력을 해시로 재 계산하고 저장된 내용으로 검증합니다. 동일한 경우 제출 버튼을 비활성화하십시오. 그렇지 않은 경우 활성화하십시오.

살펴보십시오 유효성 검사 플러그인.

이것은 더 나은 대답처럼 보입니다.

1401-using-jquery-to-leverage-onchange-method-of-inputs.htm

나는 아래에서 무엇을 테스트하지 않았다 :-) 그러나 그것이 당신이 의미 하는가?

$(document).ready(function() {
    $("#myform :input").attr("init",$(this).val()).bind("change.dirty", function(evt) {
        if ($(this).val()!=$(this).attr("init")) $(this).addClass("dirty");
        else $(this).removeClass("dirty");
        $('#thebutton').attr("disabled",!$("#myform .dirty").size());
    });
});

*-단창

전체 양식 객체를 저장하고 (그대로 또는 .Each ()와 반복하고 맵에 데이터를 저장 함)를 저장 한 다음 동일한 onsubmit을 수행하고 두 값을 비교할 수 있어야합니다.

당신이 사용할 수있는 더티 필드 대신 플러그인 및 set anotedirtyform : true. 이제 양식에 "DirtyForm"클래스가있는 경우 구원이없는 변경 사항이 있음을 의미합니다.

할 수있는 것은 페이지로드의 페이지를 스캔하기 위해 jQuery 스크립트를 설정하고 양식을 확인하고, 필드 및 해당 값을 목록에 확인한 다음 입력이 업데이트 될 때마다 해당 입력 참조 배열을 확인하는 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top