Question

我有以下代码，通过名为 data-button-day 的HTML5数据属性查找按钮元素，该属性具有星期几的值。

例如

índice

我想要做的是，当点击一个按钮时，数据属性为 data-day =＆＃34; dayOfWeek＆＃34; 的所有元素都会被禁用或启用，具体取决于在按钮的类上。

<button type="button" data-button-day="sunday" class="btn btn-danger btn-block sunday">

我得到了

<script> // this finds the correct button and works as expected $( "button" ).click(function() { $( this ).toggleClass( "btn-default btn-danger" ); var day = $(this).data("button-day"); toggle(day); }); this is called, however it produces an error as it isn't the right code to use function toggle(day) { $('[data-day="' + day + '"]').each().disabled(); } </script>

Answer 1

您不需要.each（），每个都需要参数。另外，从选择器中删除“div”。

要获得切换行为，只需添加/删除已禁用的类。

$("button").click(function () {
    $(this).toggleClass("btn-default btn-danger");
    var day = $(this).data("button-day");
    var isDisabled = $(this).hasClass("disabled");
    if (isDisabled) {
        $(this).removeClass("disabled");
    }
    else {
        $(this).addClass("disabled");
    }
    toggle(day, !isDisabled);
});


function toggle(day, disabled) {
    $('[data-day = "' + day + '"]').prop("disabled", disabled);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-button-day="sunday" class="btn btn-danger btn-block sunday">Sunday</button>
<input type="text" data-day="sunday" />
<input type="text" data-day="monday" />

Answer 2

我修改了你的代码，因为我的按钮被禁用并保持这种状态。

我将此留在这里以供将来参考。

<script>
    $("button").click(function () {
        $(this).toggleClass("btn-default btn-danger");
        var day = $(this).data("button-day");
        var isDisabled = $(this).hasClass("btn-danger");
        toggle(day, isDisabled);
    });

    function toggle(day, disabled) {
        $('[data-day = "' + day + '"]').prop("disabled", disabled);
    }
</script>

使用jQuery禁用html表单元素的正确方法

2 个答案: