[英]Show/hide tinymce with radio buttons
我嘗試使用radobutton顯示/隱藏tinymce。 像是/不是。 因此,有兩個單選按鈕。 是的-將顯示微小的mce,否將隱藏微小的mce。
我有這個:
顯示微小的mce:
<div class="form-group">
@Html.Label(Resources.Entity.Product.PdfMessage, new { @class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
@Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { @class = "form-control tiny-mce", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name, id = "tinyMCE" } })
@Html.ValidationMessageFor(model => mailModel.PdfMessage)
@*@Html.TextArea("MailProductHandlers_message", mailModel.Message, new { @class = "form-control", @rows = 15 })*@
</div>
</div>
這些是我的單選按鈕:
<div class="form-group">
@Html.Label(Resources.Entity.Product.GeneratePDF, new {@class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
@Html.Label(Resources.Entity.Product.GeneratePDFYes) @Html.RadioButtonFor(model => model.IsChecked, "Yes", new { @checked = true, id = "radioButton" })
@Html.Label(Resources.Entity.Product.GeneratePDFNo) @Html.RadioButtonFor(model => model.IsChecked, "No", new { @checked = true, id = "radioButton2" })
</div>
</div>
這是我的javascript:
<script>
$(document).ready(function () {
$("input[Id='radioButton']").click(function () {
if ($(this).is(':checked')) {
$('#tiny-mce').show();
}
else {
$('#tiny-mce').hide();
}
});
});
</script>
如果我這樣做: $('#mceu_61').hide();
它隱藏了編輯器。 但在按“是”后,它顯示了編輯器。 但是,如果我再按“否”,它將不再隱藏。 我有這個:
@Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { @class = "form-control tiny-mce", @id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
您缺少id屬性的@符號:修改腳本,如下所示:
***編輯關於單選按鈕似乎有些問題,僅應選中一個,並且它們應具有相同的名稱**
您可以使用#來表示Jquery中的ID和ID,而不必按屬性查找
編輯我改變了幾件事,我不認為您需要兩個單獨的ID,我將它們與一個類分組,您應該能夠檢查該類的on change事件,而不是同時檢查兩個ID
@Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { @class = "form-control tiny-mce", @id = "tinyMCE", @data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
@Html.RadioButtonFor(model => model.IsChecked, "Yes", new { @checked = true, @class = "pdfchecker" })
// only one should be checked
@Html.RadioButtonFor(model => model.IsChecked, "No", new { @checked = false, @class = "pdfchecker" })
<script>
// this is short hand for document ready
$(function () {
//# is to denote an ID, . is to denote a class in jQuery the change function is hit when a radio button is change check the name to make sure they are apart of the same grouping
$(".pdfchecker").change(function () {
if ($(this).is(':checked')) {
$('#tiny-mce').show();
}
else {
$('#tiny-mce').hide();
}
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.