Класс переключения на основе значений входов не работает

Question

Это не работает при переключении значений при загрузке.

Также изначально удалось заставить эту работу работать с одним коммутатором, но на странице теперь несколько, поэтому переключатель переключает их все, как бы я отрегулировал так, чтобы все было сделано для каждого из них?

$('.switch .inactive').hide(); 
 

 
var switchStatus = $('.switch').next('input').val(); 
 

 
// 1 = disable 
 
// 0 = enabled 
 
if (switchStatus == '1') { 
 
    $('.switch .active').hide(); 
 
} else { 
 
    $('.switch .active').show(); 
 
} 
 

 
$('.switch').click(function() { 
 
    $('.inactive, .active').toggle(); 
 

 
    var featureStatus = $(this).find('#ProductFeatures_TP_Status').val(); 
 
    //console.log(featureStatus); 
 
    if (featureStatus == "1") { 
 
    $(this).find('#ProductFeatures_TP_Status').val('0'); 
 
    } else { 
 
    $(this).find('#ProductFeatures_TP_Status').val('1'); 
 
    } 
 

 
});

.panel-heading { 
 
    cursor: pointer; 
 
    margin: 0; 
 
} 
 
.panel-heading .status { 
 
    float: right; 
 
} 
 
.panel-collapse { 
 
    display: none; 
 
} 
 
.panel-collapse.open { 
 
    display: block; 
 
} 
 
.panel-body .col-md-6.left { 
 
    padding-left: 0; 
 
} 
 
.panel-body .col-md-6.right { 
 
    padding-right: 0; 
 
} 
 
.panel-body .redactor-editor { 
 
    min-height: 100px !important; 
 
} 
 
.switch { 
 
    float: left; 
 
    font-size: 1.5em; 
 
    margin: -4px 10px 0 -5px; 
 
} 
 
.switch .active { 
 
    color: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="switch ProductFeatures_TP_Status"> 
 
    <i class="fa fa-toggle-on active"></i> 
 
    <i class="fa fa-toggle-on fa-rotate-180 inactive"></i> 
 
    <input type="hidden" id="ProductFeatures_TP_Status" name="ProductFeatures_TP_Status" value="0"> 
 
</div> 
 

 
<div class="switch ProductFeatures_TP_Status"> 
 
    <i class="fa fa-toggle-on active"></i> 
 
    <i class="fa fa-toggle-on fa-rotate-180 inactive"></i> 
 
    <input type="hidden" id="ProductFeatures_TP_Status1" name="ProductFeatures_TP_Status1" value="1"> 
 
</div> 
 

 
<div class="switch ProductFeatures_TP_Status"> 
 
    <i class="fa fa-toggle-on active"></i> 
 
    <i class="fa fa-toggle-on fa-rotate-180 inactive"></i> 
 
    <input type="hidden" id="ProductFeatures_TP_Status2" name="ProductFeatures_TP_Status2" value="1"> 
 
</div>

Answer 1

Как это? http://jsfiddle.net/gb13r1b3/

Все, что я сделал, было найти '.inactive, .active' относительно щелкнули .switch

$('.switch').click(function() { 
    $(this).find('.inactive, .active').toggle(); 

    var featureStatus = $(this).find('[id^=ProductFeatures_TP_Status]').val(); 
    console.log(featureStatus); 
    //console.log(featureStatus); 
    if (featureStatus == "1") { 
    $(this).find('[id^=ProductFeatures_TP_Status]').val('0'); 
    } else { 
    $(this).find('[id^=ProductFeatures_TP_Status]').val('1'); 
    } 

EDIT: синтаксис [id^=ProductFeatures_TP_Status] находит любой идентификатор, который начинается с ProductFeatures_TP_Status. После того как вы нажали .switch, есть только один идентификатор, который начинается с ProductFeatures ...

EDIT-2: http://jsfiddle.net/gb13r1b3/1/

EDIT-3: http://jsfiddle.net/gb13r1b3/5/

Answer 2

Учитывая первое предложение вашего вопроса, я предположим, что вы открыты для альтернативных решений, поэтому для вас необходим чистый CSS, но для его использования требуются некоторые изменения, если это приемлемо.

Вам нужно будет изменить все ваши входы, чтобы быть флажками, а затем помещать метки сразу после них в свой HTML, содержащие ваши значки FontAwesome.

Затем, используя CSS, вы устанавливаете флажки вне экрана и настраиваете стиль значков в соседних ярлыках на основе состояния checked каждого input.

*{box-sizing:border-box;color:#000;font-family:arial;margin:0;padding:0;} 
 
input{ 
 
    left:-9999px; 
 
    position:absolute; 
 
} 
 
label{ 
 
    height:24px; 
 
    display:inline-block; 
 
    margin:5px; 
 
    overflow:hidden; 
 
    width:27px; 
 
    white-space:nowrap; 
 
} 
 
label>i::before{ 
 
    display:inline-block; 
 
    font-size:24px; 
 
    transform:rotate(180deg); 
 
} 
 
input:checked+label>i::before{ 
 
    color:#090; 
 
    transform:rotate(0deg); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<input id="ProductFeatures_TP_Status" type="checkbox" value="1"> 
 
<label for="ProductFeatures_TP_Status"><i class="fa fa-toggle-on"></i>Label 1</label> 
 
<input checked id="ProductFeatures_TP_Status1" type="checkbox" value="1"> 
 
<label for="ProductFeatures_TP_Status1"><i class="fa fa-toggle-on"></i>Label 2</label> 
 
<input checked id="ProductFeatures_TP_Status2" type="checkbox" value="1"> 
 
<label for="ProductFeatures_TP_Status2"><i class="fa fa-toggle-on"></i>Label 3</label>