title: Disable a particular span using jQuery
body: <p>I am creating a calendar event app where you can save people's birthday dates and edit people's names or dates whenever you want.</p>
  
  <p>To display stored events I am using a <code>forEach</code> loop in JSP. I have a span named <code>ld-option-okay-edit</code> in each div. You can edit previous data after you click on that span and save your data.</p>
  
  <p>But before clicking on the save button I am checking whether any field in a particular div is empty or not, using a jQuery hover function. </p>
  
  <p>If any field is empty then I am disabling the span element so that it can't forward request to the servlet, but the problem is I am not able to disable it.
  ??????
  THE PROBLEM
  ???????
   My question is how can I disable a span through jQuery, or how can I prevent the onclick event of a span using jQuery?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;c:forEach items="${relativeUser}" var="user"&gt; 
      &lt;div class="elementsdiv"&gt;
          &lt;form action="&lt;c:url value=" ******"&gt;" method="post"&gt; 
             &lt;div class="cld-option-okay"  &gt;
                  &lt;span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" &gt;&lt;/span&gt;                                   
              &lt;/div&gt;  
                  &lt;div class="cld-option-name" &gt;
                  &lt;input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/c:forEach&gt;
  </code></pre>
  
  <p>What I have tried until now in jQuery is:</p>
  
  <pre><code>$(".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 
          }
      }
  });
  </code></pre>
  
  <p>For that line I even tried:</p>
  
  <pre><code>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
  *************************
  </code></pre>