將CSS應用於標籤和輸入元素使用jQuery中的值

Question

編輯： 我知道它們是jQuery，CSS和HTML中的一個問號。由於它是Yii自動生成的，我無法刪除它。

使用jQuery我試圖添加和刪除我的HTML中的input和label樣式。我拿到的時候我想這個沒有反應，我相信這是由於異常for=""和/或val=值被Yii產生的元素。

似乎無法得到它與if else語句工作。當被移除時，它應用CSS。

它應該做如下;選擇是，值爲「是」，然後出現第二個標籤和輸入。

我創建了一個CodePen這與作爲的jsfiddle我有問題。 https://codepen.io/CallumRocks/pen/rwrrvE

我也包括下面的相關代碼。

$(document).ready(function(){ 
 
    $('#event_Do_you_require_any_accessibility_assistance?').on('change',function(){ 
 
    if($(this).val() == 'Yes'){ 
 
     $("label[for='event_Please specify']").css('display', 'block'); 
 
     $("input#event_Please_specify").css('display', 'block'); 
 
    } 
 
    else { 
 
     $("label[for='event_Please specify']").css('display', 'none'); 
 
     $("#event_Please_specify").css('display', 'none'); 
 
    } 
 
    }); 
 
});

label[for="event_Would you like to stay informed about updates and changes to this event?"] { 
 
    width: 100% !important; 
 
    line-height: 20px; 
 
} 
 
label[for="event_Please specify"] { 
 
    display: none; 
 
} 
 
input#event_Please_specify{ 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="required-label required" for="event_Do you require any accessibility assistance?">Do you require any accessibility assistance? <span class="required">*</span></label> 
 
    <select class="form-control user-success" required="required" name="event_Do you require any accessibility assistance?" id="event_Do_you_require_any_accessibility_assistance?"> 
 
    <option value="">Please choose</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No"> No</option> 
 
    </select> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="event_Please specify">Please specify</label> 
 
    <input class="col-md-5 form-control" placeholder="Please specify" autocomplete="off" type="text" value="" name="event_Please specify" id="event_Please_specify"> 
 
</div>

Answer 1

您不必刪除?。簡單地逃逸使用\\它jQuery中：

$('#event_Do_you_require_any_accessibility_assistance\\?') 

​​

---

實施例：

$(document).ready(function(){ 
 
    $('#event_Do_you_require_any_accessibility_assistance\\?').on('change',function(){ 
 
    if($(this).val() == 'Yes'){ 
 
     $("label[for='event_Please specify']").css('display', 'block'); 
 
     $("input#event_Please_specify").css('display', 'block'); 
 
    } 
 
    else { 
 
     $("label[for='event_Please specify']").css('display', 'none'); 
 
     $("#event_Please_specify").css('display', 'none'); 
 
    } 
 
    }); 
 
});

label[for="event_Would you like to stay informed about updates and changes to this event?"] { 
 
    width: 100% !important; 
 
    line-height: 20px; 
 
} 
 
label[for="event_Please specify"] { 
 
    display: none; 
 
} 
 
input#event_Please_specify{ 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="required-label required" for="event_Do you require any accessibility assistance?">Do you require any accessibility assistance? <span class="required">*</span></label> 
 
    <select class="form-control user-success" required="required" name="event_Do you require any accessibility assistance?" id="event_Do_you_require_any_accessibility_assistance?"> 
 
    <option value="">Please choose</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No"> No</option> 
 
    </select> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="event_Please specify">Please specify</label> 
 
    <input class="col-md-5 form-control" placeholder="Please specify" autocomplete="off" type="text" value="" name="event_Please specify" id="event_Please_specify"> 
 
</div>

Answer 2

錯字在選擇 '身份證'。只需刪除問號。 $('#event_Do_you_require_any_accessibility_assistance?')

在您的codepen代碼中，如果您在HTML select id中刪除問號，則一切正常。

Answer 3

如果您不想刪除或轉義'？'您的帳號，你可以選擇jQuery的 '開始與選擇' 這樣的：

$("[id^='event_Do_you_require_any_accessibility_assistance']") 

$(document).ready(function(){ 
 
    $("[id^='event_Do_you_require_any_accessibility_assistance']").on('change',function(){ 
 
    debugger; 
 
    if($(this).val() == 'Yes'){ 
 
     $("label[for='event_Please specify']").css('display', 'block'); 
 
     $("input#event_Please_specify").css('display', 'block'); 
 
    } 
 
    else { 
 
     $("label[for='event_Please specify']").css('display', 'none'); 
 
     $("#event_Please_specify").css('display', 'none'); 
 
    } 
 
    }); 
 
});

label[for="event_Would you like to stay informed about updates and changes to this event?"] { 
 
    width: 100% !important; 
 
    line-height: 20px; 
 
} 
 
label[for="event_Please specify"] { 
 
    display: none; 
 
} 
 
input#event_Please_specify{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="required-label required" for="event_Do you require any accessibility assistance?">Do you require any accessibility assistance? <span class="required">*</span></label> 
 
    <select class="form-control user-success" required="required" name="event_Do you require any accessibility assistance?" id="event_Do_you_require_any_accessibility_assistance?"> 
 
    <option value="">Please choose</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No"> No</option> 
 
    </select> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="event_Please specify">Please specify</label> 
 
    <input class="col-md-5 form-control" placeholder="Please specify" autocomplete="off" type="text" value="" name="event_Please specify" id="event_Please_specify"> 
 
</div>