使用jQuery禁用特定跨度

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

我觉得这是你的代码应该看起来像你写的东西，但我不确定它实际上是你想要发生的。如果要禁用它，你需要使用道具（）

$(".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"); 
    } 
});