Question

我在网页上有很多复选框。所以，基本上结构就像这样::

复选框是CheckboxNo 文本框

所以，我有关于上述集合的hundredes，其中包含两个复选框，显示是或否带有文本框的说明。我的查询是当用户单击是时，文本框将启用，否则将被禁用。这很好，我可以做到这一点，并在我的一些页面中这样做:: IsProcess是给每组复选框的一个类，以便我可以解决它。 CheckboxYes是复选框的Id，代表“是” TextboxId是文本框的id，默认为禁用。

查看页面

<div style="width: 100%; float: left; padding-bottom: 10px;"> 
    <span style="width: 100%; float: left; line-height: 20px;">Do you currently have thoughts of wishing you were dead?</span>
    <div style="width: 10%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadNo, new { @class = "Wishing", @onclick = "Checkme(this.className);" }) No</div>
    <div style="width: 30%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadYes, new { @class = "Wishing", @onclick = "Checkme(this.className);" }) Yes ,explain</div>
    <div style="float: left; width: 60%;">@Html.TextAreaFor(m => m.WishingDeadExplanation, new { @readonly = "readonly" })</div>
</div>

脚本::

$('.Wishing').click(function () {
        if ($("#WishingDeadYes").is(':checked')) {
            $("#WishingDeadExplanation").removeAttr("disabled");
        }
        else {
            $("#WishingDeadExplanation").attr("disabled", "disabled");
            $("#WishingDeadExplanation").val('');
        }
    });

所以我对此很好，但是当你有上百套时，问题就到了。我必须写上面数千行。请帮助。

Answer 1

您可以为两个复选框设置不同的类，例如。

<div style="width: 100%; float: left; padding-bottom: 10px;"> 
    <span style="width: 100%; float: left; line-height: 20px;">Do you currently have thoughts of wishing you were dead?</span>
    <div style="width: 10%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadNo, new { @class = "WishingNo", @onclick = "Checkme(this.className);" }) No</div>
    <div style="width: 30%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadYes, new { @class = "WishingYes", @onclick = "Checkme(this.className);" }) Yes ,explain</div>
    <div style="float: left; width: 60%;">@Html.TextAreaFor(m => m.WishingDeadExplanation, new { @readonly = "readonly" })</div>
</div>

然后将事件绑定到WishingYes复选框。和事件，如果你要有与上面相同的千套，你不需要写不同的代码。

注意我已编写代码，假设您将为每组复选框和textarea设置与上述相同的设计

 $('.WishingYes').click(function () {
        if ($(this).is(':checked')) {
            $(this).parent().next('div').find("textarea").removeAttr("disabled");

        }
        else {
        $(this).parent().next('div').find("textarea").prop("disabled", "disabled");
        $(this).parent().next('div').find("textarea").val('');
        }
    });

FIDDLE

Answer 2

<input type="checkbox" class="abc" value="yes">

<Script type="text/javascript">
    $(.abc).is(':checked'))
    {
    //set your value here
    }
    </Script>

使用大量的复选框控件

2 个答案: