Question

我正在创建一个日历活动应用，您可以在此保存人们的生日日期，并随时编辑人物的姓名或日期。

要显示存储的事件，我在JSP中使用forEach循环。我在每个div中都有一个名为ld-option-okay-edit的范围。单击该范围并保存数据后，您可以编辑以前的数据。

但在点击保存按钮之前，我正在使用jQuery悬停功能检查特定div中的任何字段是否为空。

如果任何字段为空，那么我将禁用span元素，以便它不能将请求转发给servlet，但问题是我无法禁用它。 ?????? 问题 ??????? 我的问题是如何通过jQuery禁用跨度，或者如何使用jQuery阻止跨度的onclick事件？

这是我的代码：

<c:forEach items="${relativeUser}" var="user"> 
    <div class="elementsdiv">
        <form action="<c:url value=" ******">" method="post"> 
           <div class="cld-option-okay"  >
                <span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" ></span>                                   
            </div>  
                <div class="cld-option-name" >
                <input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name">
            </div>
        </form>
    </div>
</c:forEach>

我在jQuery中尝试过的是：

$(".elementsdiv").each(function (i, data) {
    $($(data).find('.cld-option-okay')).hover(function (e) {
        e.preventDefault();
        if ($($(data).find('input[name="name"]')).val() === "") {                      
            $($(data).find('span[name="cld-option-okay-edit"]')).addClass('disabled');//in this line  i am getting trouble 
        }
    }
});

对于那条线我甚至尝试过：

1)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","true");//with single quote also
2)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","disabled");//with single quote also
3).prop("disabled", true );
4).attr('disabled', '');
5).attr("disabled", "disabled");
6).off( "click", "**" );
7).unbind( "click", handler );

but when I apply:    
    `$($(data).find('span[name="cld-option-okay-edit"]')).hide()`;//it is applying   
**********************
       `$($(data).find('span[name="cld-option-okay-edit"]'))`till here code is working fine my problem is in applying disable.
previously i applied disable like below    

    $('.cld-option-okay-edit').addClass('disabled');

but it disables  okay span in all divs
*************************

Answer 1

我认为根据您所编写的内容，这是您的代码应该是什么样的，但我不确定它实际上是您想要发生的。如果要禁用它，则需要使用prop（）

$(".elementsdiv").each(function() {
    var elem = $(this);
    elem.find('.cld-option-okay').hover(function(e) {
        if (elem.find('input[name="name"]').val() === "") {
            elem.find('span[name="cld-option-okay-edit"]').addClass('disabled'); /*.prop("disabled",true); */
        }
    });
});

Answer 2

要启用或禁用范围，您可以这样做：

var isEmpty = false;

$('#myDiv > input').keyup(function(){ 
    isEmpty = false;

    $('#myDiv > input').each(function(i,obj){
        if(this.value == ""){
            isEmpty = true;

            return false;
        } 
    });

    // Styles for the span.
    if( ! isEmpty){
        $('#myDiv > span').removeClass('disabled');
    } else {
        $('#myDiv > span').addClass('disabled');
    }
});

$('#myDiv > span').click(function(){
    if(isEmpty){
        alert("disabled");
    } else {
        alert("enabled");
    }
});

使用jQuery禁用特定的span

2 个答案: