javascript - 删除项目时去掉复选框

Question

代码有问题:

1. 如果我选择元素，它们将被添加到 .selected-items block 中；如果我删除上排元素中的复选框，元素会在下排中消失，但我希望它在两个方向上都有效，当我单击下排中的复选框时，该元素会从底行消失，并且删除了顶行相应元素中的复选框。
2. 我有一个情况，如果底行有超过 4 个元素，则会出现警告，并且该元素不会添加到列表中，但复选框仍然存在，如果出现警告如何取消它？<

这是一个代码示例。

https://codepen.io/annbin/pen/VwYRerL

Answer 1

为了解决第一个问题，您需要将事件对象传递给 click 回调函数，并在选择的项目超过 4 个时阻止该事件:

$(document).on('click', 'input[type="checkbox"]', function(e) {
   if($('.selected-items .sample-item-wrapper').length > 3) {
      e.preventDefault();
   }
});

对于第二个问题，您需要取消选中 .samples-items-wrapper 内的匹配复选框:

$("div.samples-items-wrapper div[data-sample-id='"+selected_item+"']").find(':checkbox').prop("checked", false);

这是一个工作示例，其中包含我对您的原始代码段所做的更改:

    $(document).on('click', 'input[type="checkbox"]', function(e) {
        if($(this).prop("checked") === true){
            if($('.selected-items .sample-item-wrapper').length > 3) {
                alert('4 item max');
              e.preventDefault();
            }
            else {
                $(".selected-items").append(($(this).closest(".sample-item-wrapper").clone()));
                $(".selected-items .sample-item-wrapper").attr("style","");
            }
        }
        else if($(this).prop("checked") === false){
            var selected_item = $(this).closest(".sample-item-wrapper").attr('data-sample-id');
            $("div.selected-items div[data-sample-id='"+selected_item+"']").remove();
            $("div.samples-items-wrapper div[data-sample-id='"+selected_item+"']").find(':checkbox').prop("checked", false);
        }
    });

.samples-items-wrapper, .selected-items {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="samples-items-wrapper">
    <div data-sample-id="sample-21" class="sample-item-wrapper">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACUCAIAAADpidd3AAAAA3NCSVQICAjb4U/gAAAAEHRFWHRTb2Z0d2FyZQBTaHV0dGVyY4LQCQAACKpJREFUeNrtnclvE1ccx99vZryByUJMHKhaUqrWVa8t6QHRK8uZSpWQ+C/ItXcWCdEjUtUjcKxQxKIqnHoospUqOXCgkEJYkmZfHNvjmV8Pxoljezye/b03vycOwdvM/D7v+1vevHkPEJHJ2xBR1/W5ubmpqakHDx4Ui8V6vb73bjabHRo6piVPJlPDWmLIxGHDYCYCMKaqaqFQGDv+9YtXScOAPg83fOjm2NGpz05+Mzf3cmFxAtI/t767sTbz34cnb/+91/jv+Pj49PT0+Pi471etMambrusrKyuPHz9++PBhqVSq1+uKoqhqQtNSqfTwSO5EPn8qmf5WS+VV9aiJuboBptlksMM2Xjg73MK7gX9efPXX7IWt9T8SycPHPonmqiWHurq6WiqV7t69+/z5c13XGWOZTGZwKH905NSXhZ8QPl/bSCJouqHUDUAGHg9nwveQLBwe+K5aVRkoUV017LlfY2GhfOeOuboqE9Ryuby8vFwsFjc3NxtXmtC0ZCqTSg0MDn2B7EilCn46htoGop5IjtQqi4yxVGas9d1abbVSfl/eebXn/M+fP5/NZn05dPrChdTFi+1Q63Nza1euGK9fM2oCtuzkZHZysvG3QuaQrxFUCZtlopQ6d04LINv2v2gRHICXkF559MiYn3cA9dDly3uBl/9i1IX1AJAxhujRsJ56IICnQxtv3jiDKgtLBgB8jK/4TFTCOtWOKLR8sotlD9oTfXKHlCiFQtRCu93/9qZCdHRGwclUSKg9iYIjoh2vgKs8DO07x8FzDpQok2OY0EnUbHxyH0PLF8GVQPe7BewP5EBrj2k7t6CJylGngh9fAf/KJfDpd2IDFTv8WKcUnJu+O1GAhgTtvb2V3AFYJHc2xXa/fNQq0Oxs0BanMdxQKiRUf3t9Z/zzyLXjxyPrcYrIRMEPGG7GDYL5SsyUGkxkgn7qk+bfaDegaFtKAUG1YRnY4B9YiwxcyzRMoqKWNAHbCLp1L+D1bIWCaiXThkYDzXvbfrx/os0qKOKmCYSzYbcoyhjsL2p2SXohCsgClTS83z+Jtozh2v1ayBSiOBNwGEp5mYWhkEatiDoMqMhDiiSE+43EKNhxXLB4nZd0l2ul8vFgjzMkdoP+8YbK/aNaYJHxcnfacsz7RX46InBQqEozmRt5OCgPRJlcM/TD48phHOURqhc/Fo48miCRMewaRzmRKdcljV3+gR0JC+tzPC+IPI4fojy7X3Be6fvih9HF17kiyq1SbYha2bBl1qdHyWK3CUdiEOUFqsNSr/VGzT7g4B514uTeS3yy34+AAx4AEOx5Se6gOhcB9Oe0+4LXcpfbMrhyLlMeY6oLzXl2vO2PwnXEZkZK5S2xil2jNR+6Owmh14HTiOXBJ5Sx40UkpQZdzwiXx8UPKhGlmLqXmmLrv+BMDWJmYIpYUug60wDRd64goiPhE6r9RG0rK/vH1XLVCBBHtvKUNP7qlfPb4DGqU/3ylnxOJ4vv4IN3sXYlCkKlTDSiZC93EC0JVkQWJQTggWXYJkLsYcIG1w6QnUN98g84iKtU5MEZENQwiPpnepSAqDBQQzGvPJsuiQHVNiP1rCqpttGSZ3WWzhf7Bs31dPtYQO1h7ra3ELHX5OzmapHyldryjSj1vcirBW5oLE1KUIVNnoUfPIoLVGswGAei0ipVAhdKUIPNvwiqkCFWMlkrImjINyccE5cc5V0au2ezP37AxzkIcm/ATu6XoIaYp7Q8RIwhH5rcr++uuPu2H94BQMvOTqTUCLgGtAJK/8PFpNRgywx/Td858UXi0QktIlGiR4VREzL7DZqoxIGWn+yXX4dBUF2KMir7SsmVU/cbkO+NSZDmAmqYW1LGgWschwml56qQxQlqBOQQ0UU64+5bBFUARcaTK0cjSlE5XkSUzOfzMvbb26zubs5QTI11siqZl1Zigs32iDJxpeks5H4lahIH3QighjkoGE+uCslFvrAa90Wc2+76yTHfhRIlCYVLUG24ioiWoEqYLhFUe67CiZV2u+jOtQ2kWIP+BNWGMcVUSoYJKjWCShUOpzHV3WwjrgoV/pMmhX9x0FlJBdWL7fzb+YJW5g5xTCDM0xALLe91Kj/W7Lyfwy1pyn4ljKwagenfW1hsrkFQBRRZjw833uLNDytEVD4/rBFO+ZpGVu6dZvd5hlwlw3HPfqHZvNdU/HRQJeZEpXQ8GuF09+GeG2kDQRVSmj2mRkTOlUaUuPPhwivVi0UOzKZvfT10u/O2+qwiRx9HzpQULWN5tq9GznxjhFwVoa+zrcTE6IgGs0E691CDu8IeXCNvkXCVfB0lHq4ofK4KEZWPq7R1alT9hocJTQohlK8pUkozcsY0TCinans/G0lQqXEJNbZL70ZiBFJqqIEgnOfmNB4uNbaSDcgUpNQoe3BAqlXC7JjEVZKYSilS+Fy1kInGNqAeuJVksRqiXyZSpOmwcrgEX0wkSaJETj4aqFTJyAA1NPUIJ9Me/duXa7FMlGqlkidDd72YIIiGdaAQTtvp+RuLi86g7ty6tUOOjNwvNYJKLYTBh0RCPX7cfa6CuLW9vbu7W61WTdPce2d4aCiVTvse5HRdX1tfNwwjA5DTEqZpbpvmJpqqqmaz2UwmI1AxVq3VNtbXTUTGmAKQy+VS6bSqqs7UOTi4H5L30i2s1czlZWYYLs7MMIxarXb/3r3pp09nZma2trbM5u9cvXr19OnTvtcz8/PzN27cWFpa+uFQ9vrYp5u75fub679Wto+Njv546dLZs2dFgVqt1WZnZ3+5fbtcLjPGDmez169dm5iYGMnlnEEdGIAm132lQjKpnjjhrq99ePfuz2fPfi8W/3758kO5XK3XETGVSo2MjNTz+Xo+73tJUNnaesvYe8NYMUy1biCyDYYLiHWAzSNH9NFRUaDq1eru8PBSIrHBmGmayUrltydP3jJ25syZQqGgaZoLPfwPUH6ySGN/MsMAAAAASUVORK5CYII=" />
        <div class="pretty p-default">
            <input type="checkbox" />
            <div class="state">
                <label>1</label>
            </div>
        </div>
    </div>
    <div data-sample-id="sample-22" class="sample-item-wrapper">
        <img src="data:image/png;base64,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" />
        <div class="pretty p-default">
            <input type="checkbox" />
            <div class="state">
                <label>2</label>
            </div>
        </div>
    </div>
    <div data-sample-id="sample-23" class="sample-item-wrapper">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACUCAIAAADpidd3AAAAA3NCSVQICAjb4U/gAAAAEHRFWHRTb2Z0d2FyZQBTaHV0dGVyY4LQCQAACKpJREFUeNrtnclvE1ccx99vZryByUJMHKhaUqrWVa8t6QHRK8uZSpWQ+C/ItXcWCdEjUtUjcKxQxKIqnHoospUqOXCgkEJYkmZfHNvjmV8Pxoljezye/b03vycOwdvM/D7v+1vevHkPEJHJ2xBR1/W5ubmpqakHDx4Ui8V6vb73bjabHRo6piVPJlPDWmLIxGHDYCYCMKaqaqFQGDv+9YtXScOAPg83fOjm2NGpz05+Mzf3cmFxAtI/t767sTbz34cnb/+91/jv+Pj49PT0+Pi471etMambrusrKyuPHz9++PBhqVSq1+uKoqhqQtNSqfTwSO5EPn8qmf5WS+VV9aiJuboBptlksMM2Xjg73MK7gX9efPXX7IWt9T8SycPHPonmqiWHurq6WiqV7t69+/z5c13XGWOZTGZwKH905NSXhZ8QPl/bSCJouqHUDUAGHg9nwveQLBwe+K5aVRkoUV017LlfY2GhfOeOuboqE9Ryuby8vFwsFjc3NxtXmtC0ZCqTSg0MDn2B7EilCn46htoGop5IjtQqi4yxVGas9d1abbVSfl/eebXn/M+fP5/NZn05dPrChdTFi+1Q63Nza1euGK9fM2oCtuzkZHZysvG3QuaQrxFUCZtlopQ6d04LINv2v2gRHICXkF559MiYn3cA9dDly3uBl/9i1IX1AJAxhujRsJ56IICnQxtv3jiDKgtLBgB8jK/4TFTCOtWOKLR8sotlD9oTfXKHlCiFQtRCu93/9qZCdHRGwclUSKg9iYIjoh2vgKs8DO07x8FzDpQok2OY0EnUbHxyH0PLF8GVQPe7BewP5EBrj2k7t6CJylGngh9fAf/KJfDpd2IDFTv8WKcUnJu+O1GAhgTtvb2V3AFYJHc2xXa/fNQq0Oxs0BanMdxQKiRUf3t9Z/zzyLXjxyPrcYrIRMEPGG7GDYL5SsyUGkxkgn7qk+bfaDegaFtKAUG1YRnY4B9YiwxcyzRMoqKWNAHbCLp1L+D1bIWCaiXThkYDzXvbfrx/os0qKOKmCYSzYbcoyhjsL2p2SXohCsgClTS83z+Jtozh2v1ayBSiOBNwGEp5mYWhkEatiDoMqMhDiiSE+43EKNhxXLB4nZd0l2ul8vFgjzMkdoP+8YbK/aNaYJHxcnfacsz7RX46InBQqEozmRt5OCgPRJlcM/TD48phHOURqhc/Fo48miCRMewaRzmRKdcljV3+gR0JC+tzPC+IPI4fojy7X3Be6fvih9HF17kiyq1SbYha2bBl1qdHyWK3CUdiEOUFqsNSr/VGzT7g4B514uTeS3yy34+AAx4AEOx5Se6gOhcB9Oe0+4LXcpfbMrhyLlMeY6oLzXl2vO2PwnXEZkZK5S2xil2jNR+6Owmh14HTiOXBJ5Sx40UkpQZdzwiXx8UPKhGlmLqXmmLrv+BMDWJmYIpYUug60wDRd64goiPhE6r9RG0rK/vH1XLVCBBHtvKUNP7qlfPb4DGqU/3ylnxOJ4vv4IN3sXYlCkKlTDSiZC93EC0JVkQWJQTggWXYJkLsYcIG1w6QnUN98g84iKtU5MEZENQwiPpnepSAqDBQQzGvPJsuiQHVNiP1rCqpttGSZ3WWzhf7Bs31dPtYQO1h7ra3ELHX5OzmapHyldryjSj1vcirBW5oLE1KUIVNnoUfPIoLVGswGAei0ipVAhdKUIPNvwiqkCFWMlkrImjINyccE5cc5V0au2ezP37AxzkIcm/ATu6XoIaYp7Q8RIwhH5rcr++uuPu2H94BQMvOTqTUCLgGtAJK/8PFpNRgywx/Td858UXi0QktIlGiR4VREzL7DZqoxIGWn+yXX4dBUF2KMir7SsmVU/cbkO+NSZDmAmqYW1LGgWschwml56qQxQlqBOQQ0UU64+5bBFUARcaTK0cjSlE5XkSUzOfzMvbb26zubs5QTI11siqZl1Zigs32iDJxpeks5H4lahIH3QighjkoGE+uCslFvrAa90Wc2+76yTHfhRIlCYVLUG24ioiWoEqYLhFUe67CiZV2u+jOtQ2kWIP+BNWGMcVUSoYJKjWCShUOpzHV3WwjrgoV/pMmhX9x0FlJBdWL7fzb+YJW5g5xTCDM0xALLe91Kj/W7Lyfwy1pyn4ljKwagenfW1hsrkFQBRRZjw833uLNDytEVD4/rBFO+ZpGVu6dZvd5hlwlw3HPfqHZvNdU/HRQJeZEpXQ8GuF09+GeG2kDQRVSmj2mRkTOlUaUuPPhwivVi0UOzKZvfT10u/O2+qwiRx9HzpQULWN5tq9GznxjhFwVoa+zrcTE6IgGs0E691CDu8IeXCNvkXCVfB0lHq4ofK4KEZWPq7R1alT9hocJTQohlK8pUkozcsY0TCinans/G0lQqXEJNbZL70ZiBFJqqIEgnOfmNB4uNbaSDcgUpNQoe3BAqlXC7JjEVZKYSilS+Fy1kInGNqAeuJVksRqiXyZSpOmwcrgEX0wkSaJETj4aqFTJyAA1NPUIJ9Me/duXa7FMlGqlkidDd72YIIiGdaAQTtvp+RuLi86g7ty6tUOOjNwvNYJKLYTBh0RCPX7cfa6CuLW9vbu7W61WTdPce2d4aCiVTvse5HRdX1tfNwwjA5DTEqZpbpvmJpqqqmaz2UwmI1AxVq3VNtbXTUTGmAKQy+VS6bSqqs7UOTi4H5L30i2s1czlZWYYLs7MMIxarXb/3r3pp09nZma2trbM5u9cvXr19OnTvtcz8/PzN27cWFpa+uFQ9vrYp5u75fub679Wto+Njv546dLZs2dFgVqt1WZnZ3+5fbtcLjPGDmez169dm5iYGMnlnEEdGIAm132lQjKpnjjhrq99ePfuz2fPfi8W/3758kO5XK3XETGVSo2MjNTz+Xo+73tJUNnaesvYe8NYMUy1biCyDYYLiHWAzSNH9NFRUaDq1eru8PBSIrHBmGmayUrltydP3jJ25syZQqGgaZoLPfwPUH6ySGN/MsMAAAAASUVORK5CYII=" />
        <div class="pretty p-default">
            <input type="checkbox" />
            <div class="state">
                <label>3</label>
            </div>
        </div>
    </div>
  <div data-sample-id="sample-24" class="sample-item-wrapper">
        <img src="data:image/png;base64,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" />
        <div class="pretty p-default">
            <input type="checkbox" />
            <div class="state">
                <label>4</label>
            </div>
        </div>
    </div>
  <div data-sample-id="sample-25" class="sample-item-wrapper">
        <img src="data:image/png;base64,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" />
        <div class="pretty p-default">
            <input type="checkbox" />
            <div class="state">
                <label>5</label>
            </div>
        </div>
    </div>
</div>


<div class="selected-items"></div>