Изменить <i> при нажатии на

Question

У меня есть этот код, но он работает только с <img>. Он изменяет изображение и добавляет значение к флажку. Я хотел бы, чтобы он работал с <i class='fa'></i>. Что мне нужно изменить?

$(".img-checkbox").click(function() { 
 
    var img = $(this); 
 
    alert(img.prev().prop('checked')); 
 
    if (img.prev().prop("checked")) { 
 
    img.css({ 
 
     'opacity': '0.3' 
 
    }); 
 
    } else { 
 
    img.css({ 
 
     'opacity': '1.0' 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="checkbox-inline"> 
 
    <input type="checkbox" name="qRequirements" hidden> 
 
    <i class="fa fa-phone fa-4x" class="img-responsive img-checkbox"></i> 
 
</label> 
 

 
<label class="checkbox-inline"> 
 
    <input type="checkbox" name="qRequirements" hidden> 
 
    <i class="fa fa-user fa-4x" class="img-responsive img-checkbox"></i> 
 
</label> 
 

 
<label class="checkbox-inline"> 
 
    <input type="checkbox" name="qRequirements" hidden> 
 
    <i class="fa fa-mail fa-4x" class="img-responsive img-checkbox"></i> 
 
</label>

Answer 1

Вы устанавливаете class два раза в ваших <i> элементов, что делает его игнорировать второй class назначение и JQuery не распознает элементы будучи щелкнул. Вы не можете использовать атрибут более одного раза для каждого элемента. Изменение

<i class="fa fa-user fa-4x" class="img-responsive img-checkbox"></i> 

в

<i class="fa fa-user fa-4x img-responsive img-checkbox"></i> 

$(".img-checkbox").click(function() { 
 
    var img = $(this); 
 
    if (img.prev().prop("checked")) { 
 
    img.css({ 
 
     'opacity': '0.3' 
 
    }); 
 
    } else { 
 
    img.css({ 
 
     'opacity': '1.0' 
 
    }); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="checkbox-inline"> 
 
    <input type="checkbox" name="qRequirements" hidden> 
 
    <i class="fa fa-phone fa-4x img-responsive img-checkbox"></i> 
 
</label> 
 

 
<label class="checkbox-inline"> 
 
    <input type="checkbox" name="qRequirements" hidden> 
 
    <i class="img-responsive img-checkbox fa fa-user fa-4x"></i> 
 
</label> 
 

 
<label class="checkbox-inline"> 
 
    <input type="checkbox" name="qRequirements" hidden> 
 
    <i class="fa fa-mail fa-4x img-responsive img-checkbox"></i> 
 
</label>