2016-04-08 2 views
0

На моем .htmlCheckbox не получает проверяется с помощью JQuery

 <div class="col-md-9 col-sm-9 col-xs-12"> 
       <div class=""> 
        <label> 
        <input type="checkbox" id="SMSCheckbox" class="js-switch" /> SMS 
        </label> 
       </div> 
       <div class=""> 
        <label> 
        <input type="checkbox" id="EmailCheckBox" class="js-switch" /> Email 
        </label> 
       </div> 
       </div> 

На мой .js

$(document).ready(initialize); 

function initialize() { 
    console.log("loaded JS"); 
    $.ajax({ 
     type: "GET", 
     url: "./getNotificationSettings.php", 
     datatype: "json", 
     success: function(response) { 
      var response = JSON.parse(response); 
      var bySMS = response[0].receiveSMS; 
      var byEmail = response[0].receiveEmail; 
      if (bySMS) { 
       console.log("bySMS = true"); 
       $('#SMSCheckbox').prop('checked', true); 
      } else { 
       console.log("bySMS = false"); 
       $('#SMSCheckbox').prop('checked', false); 
      } 
      if (byEmail) { 
       console.log("byEmail = true"); 
       $('#EmailCheckBox').prop('checked', true); 
      } else { 
       console.log("byEmail = false"); 
       $('#EmailCheckBox').prop('checked', false); 
      } 
     }, 
     error: function(e) { 
      console.log(e); 
     } 
    }); 
} 

bySMS = true byEmail = true Я проверил консоль, что она идти внутри, если true ветвь, но как-то мой флажок не выбирается. Странно, что я тестировал его на jsfiddle, и он работает.

Что может быть причиной этой странной проблемы?

Не уверен, что для переключения флажка мне нужно было щелкнуть по этой формулировке. Нажатие на переключатель не переключает его.

enter image description here

+0

После '$ (документ) .ready' –

+0

, если этот код работает, когда вы изолировать его в jsFiddle то, что код не проблема. однако вы не установили 'bySMS' или' byEmail' - –

+0

MIght - проблема с областью, я не вижу, что эти переменные установлены внутри функции – Mihai

ответ

0

Я всегда использую .click() на флажках при изменении проверенного свойства не работают по какой-то причине, не уверен, что это правильный способ сделать это.

0

Я создал небольшую функцию, чтобы справиться с этим для вас:

$.fn.setCheckbox = function(value) { 
    var checked = $(this).attr("checked") != "undefined" && 
    ($(this).attr("checked") === "checked" || 
     $(this).attr("checked") === true); 
    if (checked != value) { 
    $(this).click(); 
    } 
} 

Plunker: https://plnkr.co/edit/mdAzNsZnRdl2ifIT22e0?p=preview

Смежные вопросы