2016-08-29 3 views
0

Я использую jQuery UI controlgroup для создания флажков в форме HTML. После того, как входные значения обрабатываются скриптом PHP, результаты отображаются на одной странице вместе с самой формой, так что пользователь может настроить фильтры. То, что я пытаюсь сделать, состоит в том, чтобы флажки, которые были отмечены ранее, остаются проверенными после того, как форма была обработана, чтобы пользователь увидел, какие критерии выбора были использованы. Для этого я сохраняю все данные PHP $_POST в переменной JS, используя json_encode, которую я бы хотел использовать для повторения меток и отметки тех, которые были проверены ранее. Проблема в том, что единственным вариантом виджета controlgroup, который я могу использовать, является classes с ui-controlgroup-item, который показывает каждую отдельную метку в группе как активную, и для жизни меня не могу понять, как сделать ее условной, например. так что я могу использовать if(label[for=' + var.value +'])', var - <?php echo json_encode($_POST) ?> или что-то подобное. Получу любые предложения.Styling single jQuery UI controlgroup-item

Вот HTML:

 <div id="currencyList"> 
      <label for="gbp">GBP</label> 
      <input type="checkbox" value="gbp" name="currency[]" id="gbp" > 
      <label for="usd">USD</label> 
      <input type="checkbox" value="usd" name="currency[]" id="usd"> 
      <label for="eur">EUR</label> 
      <input type="checkbox" value="eur" name="currency[]" id="eur"> 
     </div> 

И это немного JavaScript:

$("#currencyList").controlgroup({ 
     classes: { 
     "ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active" 
     } 
}); 

ответ

0

После попытки найти решение в течение нескольких дней я решил пропустить пытается с помощью опции classes и вместо для перемещения за пределами виджета controlgroup. Итак, вот мое не очень красивое решение:

var postData = <?php echo json_encode($_POST) ?>; 

$("#currencyList").controlgroup(); 

$('#currencyList').children('label').each(function() { 
    if(postData.currency.indexOf($(this).attr("for")) >= 0){ 
     $(this).addClass("ui-checkboxradio-checked ui-state-active"); 
    } 
});