没有文本，Jquery会阻止输入框触发但不会阻止textarea触发器

Question

My input box uses placeholder text and jquery to ensure it doesn't trigger until I add text (i.e. not placeholder text). I want to replace the input box with a text area but cannot get the jquery to work. With the textarea below, the submit button triggers regardless of whether I type in the text area.

<div class="RepForm-loggedin" >
  <form name="RepForm" method="POST" action="<?php echo $this->newReply;?>">
    <table name="RepFormTable" style="width:100%">
      <tr>
        <td style="width:100%">

    //CURRENT INPUT BOX
        <input type="text" rows="8"  id="repContent" class="inputbox inputbox-title placeholder-soc-med" name="repContent" placeholder="Ask a question . . ."/>

    //DESIRED REPLACEMENT TEXT AREA
        <textarea type="text" rows="8"  style="max-width:600px; width:100%" id="repContent" class="inputbox inputbox-title placeholder-soc-med" name="repContent" placeholder="Ask a question . . ."></textarea>

        </td>
       </tr>
       <tr>
         <td style = "text-align:right;">
             <input type="submit" value="Submit" id="sendComment" class="dgrey-button">
         </td>
       </tr>
    </table>
  </form>
</div>

<script type="text/javascript">
        $(document).ready(function(){
            $('#sendComment').attr('disabled',true);
            $('#repContent').keyup(function(){
                if($(this).val().length !=0)
                    $('#sendComment').attr('disabled', false);
                else
                    $('#sendComment').attr('disabled',true);
            })
        });
    </script>

Answer 1

You have duplicated id="repContent".

Your input box also has this ID. So, when you select your element with $('#repContent'), it is returning only your input field.

Just remove this attribute from the <input /> and your code will work.

Working fiddle: https://jsfiddle.net/mrlew/7o493syd/1/

---

You may ask: Why $('#id') does not select all elements with this ID?

First of all, you can have only one element with the same ID in the document. From the HTML specification:

id = This attribute assigns a name to an element. This name must be unique in a document.

Then, when you select by id using jQuery, it will return just the first match (because it uses document.getElementById() internally). From the docs:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.