javascript - 如何使用 jquery 中的值将 <del></del> 元素包裹在复选框周围

Question

我正在尝试此代码，但它不起作用，请帮忙，jquery 新手

我的 HTML

<div class="has-success topSpaceFromRoof">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxSuccess" value="option1"> SAM C WILL HAVE BACON
        </label>
    </div>
</div>

我的 JavaScript

$("input[type=checkbox]").click(function() {
    if ($(this).click) {
        $(this).attr('disabled', 'disabled').wrapAll('<del></del>');
    }

});

Answer 1

请参阅下面代码中的内联注释。

$("input[type=checkbox]").click(function() {

    // Check if checkbox is checked
    if ($(this).is(':checked')) {

        $(this).attr('disabled', 'disabled'); // Disable checkbox

        var checkboxHtml = $(this).closest('label').html(); // Get the checkbox with the name of it

        $(this).closest('label').html('<del>' + checkboxHtml + '</del>'); // Wrap it in `del` tag
    }
});

Demo