javascript 독점적 인 CheckBox 문제

Question

나는 telerik 그리드에있는 레코드 목록을 표시하는 라디오 버튼이 있습니다. 라디오 버튼을 선택하면 완료 및 불완전한 레코드가 표시됩니다. 그러나 사용자는 완전하거나 불완전한 레코드 만 표시하는 방법을 원합니다. 나는 두 개의 상호 배타적 인 체크 박스를 추가했다. 사용자는 데이터를 표시하기 위해 전체 또는 불완전 확인란을 선택할 수 있습니다. 내 로컬에서는 정상적으로 작동하지만 서버에서는 제대로 작동하지 않습니다. 처음에는 상태를 유지하기 전에 사용자가 두세 번 확인란을 클릭해야합니다. 또한 완료를 선택하고 사용자가 다음에 불완전하게 선택하면 확인 표시가 다시 완료됩니다. 사용자는 두 번째로해야합니다. 내가 여기서 뭘 잘못하고 있니? 여기

는

@Html.CheckBox("complete", SessionWrapper.currentEncounter.complete, new { id = "chkComplete", onclick = "chkInCompleteOption(1);this.form.submit();" }) <strong>Complete</strong> 

@Html.CheckBox("Incomplete", SessionWrapper.currentEncounter.incomple, new { id = "chkInComplete", onclick = "chkInCompleteOption(2);this.form.submit();" }) <strong>Incomplete</strong> 

// 여기는 자바 서버 측에서 상호 배타적 설정 값

var completeCheck = '@SessionWrapper.currentEncounter.complete'; 
var inCompleteCheck = '@SessionWrapper.currentEncounter.incomplete'; 

function chkInCompleteOption(e) { 
     if (e == 1) { 
      var cc = $('#chkComplete').is(':checked'); 
      var data = { "complete": cc, "inComplete": false }; 
         var url = '@Url.Action("CompletedOption", "Orders")'; 
         $.ajax({ 
          url: url, 
          type: 'post', 
          dataType: 'text', 
          data: data, 
          success: function (data) { 
           testComplete(); 
           return true; 
          }, 
          error: function (error) { 
           alert("An error has occured."); 
           return false; 

          } 
         }); 

        } 
        else if (e == 2) { 
         var inc = $('#chkInComplete').is(':checked') 
         var data = { "complete": false, "inComplete": inc }; 
         var url = '@Url.Action("CompletedOption", "Orders")'; 
         $.ajax({ 
          url: url, 
          type: 'post', 
          dataType: 'text', 
          data: data, 
          success: function (data) { 
           testInComplete(); 
           return true; 
           // $('#chkComplete').removeAttr("checked", "checked"); 
           // $('#chkInComplete').attr("checked", "checked"); 

          }, 
          error: function (error) { 
           alert("An error has occured."); 
           return false; 

          } 
         }); 
     } 


    } 


function testInComplete() { 
     if (inCompleteCheck == true) { 
       inCompleteCheck = $('#chkInComplete').attr("checked", "checked"); 
       document.getElementById('chkInComplete').checked = true; 
     } else { 
      $('#chkInComplete').removeAttr("checked"); 
     } 
    } 


    function testComplete() { 
     if (inCompleteCheck == true) { 
      completed = $('#chkComplete').attr("checked", "checked"); 
      document.getElementById('chkComplete').checked == true; 
     } else { 
      $('#chkComplete').removeAttr("checked"); 
     } 
    } 

//

public bool CompletedOption(bool complete, bool inComplete) 

      if (inComplete == true && complete == true) 
      { 
       return false; 
      } 

      if (complete == true) 
      { 
       SessionWrapper.currentEncounter.complete = true; 
      } 
      else if (SessionWrapper.currentEncounter.complete == true && (complete == null || inComplete == null)) 
      { 
       SessionWrapper.currentEncounter.complete = true; 
      } 
      else 
      { 
       SessionWrapper.currentEncounter.complete = false; 
      } 


      if (inComplete == true) 
      { 
       SessionWrapper.currentEncounter.incomplete = true; 
      } 
      else if (SessionWrapper.currentEncounter.incomplete == true && (complete == null || inComplete == null)) 
      { 
       SessionWrapper.currentEncounter.incomplete = true; 
      } 
      else 
      { 
       SessionWrapper.currentEncounter.incomplete = false; 
      } 


      return true; 
     } 

Answer 1

I 인 체크 박스의 HTML이고 문제를 발견했습니다. 서버 측이 제대로 업데이트되고 있습니다. 그러나 아약스는 실행될 때마다 오류 메시지를 반환하고있었습니다. 문자열이 예상 될 때 서버 측의 메서드가 Boolean을 반환했습니다. 또한 async와 cache를 false로 설정했습니다. 응용 프로그램을 다시 실행하고 작동합니다.

// 변경 방법 부울에서 문자열에 서명

public string CompletedOption(bool complete, bool inComplete) 
{ 
    return "true"; 
} 

아약스 후

$.ajax({ 
      url: url, 
      type: 'post', 
      dataType: 'text', 
      async: false, //Added 
      cache: false, //Added 
      data: data, 
      success: function (data) { 
        return data; 
      }, 
      error: function (error) { 
       alert("An error has occured."); 
       return false; 
      } 
     });