Question

我正在使用jQuery库＆＃39; iCheck＆＃39;对于输入，我正在尝试将标签的颜色设置为绿色，以便回答那些问题。当我不使用iCheck时，一切都很完美，但是当我使用该库时，我的脚本似乎没有任何效果。我做错了什么？

HTML文档

<VirtualHost *:80>
     DocumentRoot /var/www/
     ServerAdmin webmaster@localhost
     <Directory /var/www/ci/>

         AllowOverride All

     </Directory>
     ErrorLog ${APACHE_LOG_DIR}/error.log
     CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

JS

<div class="radio" >
  {% if answer.is_valid == True %}
  <input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
  {% else %}
  <input type="radio" name="question-{{ question.id }}" id="{{answer.text}}">
  {% endif %}
    <label><b>{{ answer.text }}</b></label>
</div>

Answer 1

这是因为icheck改变了DOM，使得原始输入甚至不再可见。检查DOM浏览器以查看iCheck已更改

<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">

要

<div class="iradio_flat-pink" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="radio" name="question-1" id="text" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
</ins>
</div>

或类似的东西要更改元素的颜色，您需要使用iCheck函数，并为其指定一个不同的类：

$('#input1').iCheck({
    radioClass: 'radio-green' //or something you like.
});

Answer 2

试试这个！

$( document ).ready(function () {        
    if ($("input.flat")[0]) {
        $(document).ready(function () {
            $('input.flat').iCheck({
                checkboxClass: 'icheckbox_flat-blue',
                radioClass: 'iradio_flat-blue'
            });
        });
    }
});

iCheck - 设置兄弟姐妹的颜色

2 个答案: