無法使用 jquery 刪除文本框

Question

我使用 asp.net 核心創建了復選框：

<div class="form-group">
    <label asp-for="EthinicalGroups" class="control-label"></label><br />
    @{int i = 0;}
    @foreach (var item in ViewBag.EthinicalGroup)
    {
        <input name="EthinicalGroup" value="@item.Id" type="checkbox" id="EthinicalGroup[@i]" />
        <label>@item.Name</label><br />
        i++;
    }
</div>

在檢查復選框時，我添加了一個文本框，在取消選中時，我試圖刪除一個復選框，但無法刪除一個復選框。

$('form input[type=checkbox]').change(function (e) {
    e.preventDefault();

    if ($(this).prop("checked") == true) {
        var className = $(this).attr('id');
        b = className + "value";
        $(this).after('&nbsp;<input type="text" id="'+b+'"  size="4" name="Value">');

    }
    else {
        var className = $(this).attr('id');
        b = className + "value";
        $("#"+b).remove();
    }
});

如何在取消選中復選框時刪除文本框。

Answer 1

您需要將復選框的value屬性用於 select 文本框，因為所有復選框的name都相同：

$('form input[type=checkbox]').change(function (e) {
    e.preventDefault();

    if ($(this).prop("checked") == true) {
        var className = $(this).attr('value');
        b = className + "value";
        $(this).after('&nbsp;<input type="text" id="'+b+'"  size="4" name="Value">');

    }
    else {
        var className = $(this).attr('value');
        b = className + "value";
        $("#"+b).remove();
    }
});