Видимый / скрыть div с JQuery, когда флажок установлен - PullRequest
Новая
       70

Видимый / скрыть div с JQuery, когда флажок установлен

0 голосов
/ 30 октября 2018

У меня есть скрипт, который делает div видимым или скрытым, когда я устанавливаю флажок (работает отлично). Например: продукт имеет скидку , проверьте -> показать div, чтобы ввести цену со скидкой.

При загрузке страницы сведений флажок устанавливается / снимается в соответствии со свойством «isAvailable». Когда этот флажок установлен по умолчанию, он не показывает div! Если вы дважды не нажмете на флажок и не отметите его вручную.

Это мой сценарий: 

   $("#DiscountCheckbox").change(function () {
            if ($(this).is(':checked')) {
                document.getElementById("percentageDiv").style.visibility = "visible";
                $("#percentageDiv").fadeIn(200);
            }
            else {
                $("#percentageDiv").fadeOut(200);
                document.getElementById("percentageDiv").style.visibility = "hidden";
            }
        });

Это HTML: 

<div class="form-group">
  @Html.CheckBoxFor(p => p.Product.Price.IsActive, new { @class = "filled-in", id = "DiscountCheckbox" })
  <label for="DiscountCheckbox" title="Add a discount to this product">add discount</label>
</div>

<!-- div that is visible/hidden -->
<div class="form-group" id="percentageDiv">
<label class="control-label" for="txtboxCustomerRef">Discount name:</label>
@Html.TextBoxFor(p => p.Discount.DiscountName, new { placeholder = "enter discount name", @class = "form-control", id = "DiscountName", title = "Enter a name for this discount" })
</div>

Я пытался сделать это в документе готовым, но у меня не получилось, может быть, я не правильно сделал: 

     $(function () {
        if ($("#DiscountCheckbox").is(':checked')) {
            document.getElementById("percentageDiv").style.visibility = "visible";
            $("#percentageDiv").fadeIn(200);
        }
        else {
            $("#percentageDiv").fadeOut(200);
            document.getElementById("percentageDiv").style.visibility = "hidden";
        }


    });

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Это поможет вам понять

HTML 

<label for="chkPassport">
    <input type="checkbox" id="chkPassport" />
    Do you have Passport?
</label>
<hr />
<div id="dvPassport" style="display: none">
    Passport Number:
    <input type="text" id="txtPassportNumber" />
</div>
<div id="AddPassport">
    Add New Password
</div>

Jquery 

$(function () {
        $("#chkPassport").click(function () {
            if ($(this).is(":checked")) {
                $("#dvPassport").show();
                $("#AddPassport").hide();
            } else {
                $("#dvPassport").hide();
                $("#AddPassport").show();
            }
        });
    });

Надеюсь, это сработает для вас.

0 голосов
/ 31 октября 2018

Я нашел проблему!

Jquery, который я использовал, не был проблемой. Проверка / снятие флажка вручную прекрасно показывает и скрывает (Скидка) -Div. Но не тогда, когда моя страница была загружена в первый раз.

Итак, я попробовал несколько способов выполнить проверку документа, но это не сработало. Я начал копаться в своем коде и пришел к следующему выводу: div, который должен быть видимым / скрытым, - это внутри другого div, у которого сверху есть вкладки . Проверка должна была быть сделана при нажатии на эту конкретную вкладку! Я вообще не думал об этом .. Мысль, что это не могло быть проблемой ..

Здесь вы можете увидеть все сценарии, которые я сейчас использую: 

<script>
    $("#DiscountCheckbox").change(function () {
                    if ($(this).is(':checked')) {
                        document.getElementById("percentageDiv").style.visibility = "visible";
                        $("#percentageDiv").fadeIn(200);
                    }
                    else {
                        $("#percentageDiv").fadeOut(200);
                        document.getElementById("percentageDiv").style.visibility = "hidden";
                    }
                });
            $("#tabPrices").click(function () {
                if ($("#DiscountCheckbox").is(':checked')) {
                    document.getElementById("percentageDiv").style.visibility = "visible";
                    $("#percentageDiv").fadeIn(200);
                }

                else {
                    $("#percentageDiv").fadeOut(200);
                    document.getElementById("percentageDiv").style.visibility = "hidden";
                }

            });
    </script>
0 голосов
/ 30 октября 2018

Поместите ваш код в $ (документ) .ready () {} в пропетии 

$(document).ready(function() {
        if ($("#DiscountCheckbox").is(':checked')) {
        document.getElementById("percentageDiv").style.visibility = "visible";
        $("#percentageDiv").fadeIn(200);
    }
    else {
        $("#percentageDiv").fadeOut(200);
        document.getElementById("percentageDiv").style.visibility = "hidden";
    }});
...