树视图留言板 - 禁用提交按钮不适用于儿童答案

【问题标题】：Tree View Messageboard - disable submit button not working for children树视图留言板 - 禁用提交按钮不适用于儿童
【发布时间】：2017-04-04 00:33:10
【问题描述】：

以下更正..

我有一个包含父消息和子消息的留言板（如对话树）。我已经实现了下面的 jquery，它在输入框中没有输入任何内容时禁用提交按钮。它适用于父提交按钮（#sendcomment 输入框），但不适用于子提交按钮（也适用于#sendcomment 输入框）。有任何想法吗？

<div id="defaultcontainerwrapper" class="maxwidth">
    <div class="messageList" style="margin-top:10px; margin-left:30px;">
            <?php foreach($this->messageList as $k=>$message){
                $postId=$message['postId'];
                if($message['depth']!=0){
                    $depth=$message['depth'];
                    do{
                        echo(": . . ");
                        $depth--;
                    }
                    while($depth!=0);
                }
                ?>

        <span class="viewThread">
            <a style="color:#cd6b2e;text-decoration:underline; cursor:pointer; cursor: hand;"
               onclick="<?php echo "javascript:ajaxView(" . $postId . ");"; ?>"><?php echo $message['content'] ? nl2br(substr($message['content'], 0, 30)) . '...' : ''; ?></a>
            <?php echo htmlspecialchars("<");?><a style="color:grey;"><?php echo $message['posterName'];?></a><?php echo htmlspecialchars(">")."&nbsp".$message['date']."<br/>\n";?>
        </span>

                <div class="displayPanel" id="<?php echo $postId;?>" >
                    <div class="displayContent" >
                    </div>

                    <div class="RepForm-loggedin" >
                        <form name="RepForm" method="POST" action="<?php echo $this->newReply;?>">
                            <table name="RepFormTable" style="width:100%">
                                <script type="text/javascript" src="data/js/jquery_lib/jquery.min.js"></script>

                                <tr>
                                    <td style="width:100%">
                                        <input type="text" maxlength="75" id="repContent" class="inputbox inputbox-title placeholder-soc-med"
                                               name="repContent" placeholder="Add your comment here. . ."/>
                                        <span><input type="submit" id="sendComment" name="sendComment" class="dgrey-button cancel-button" value="Submit"></span>

                                    </td>
                                </tr>
                            </table>

                            <textarea style="display: none" name="content"></textarea>
                            <input type="hidden" value="<?php echo $this->tag ;?>" name="tag">
                            <input type="hidden" value="" name="parentId">
                            <input type="hidden" value="" name="depth">
                        </form>
                    </div>
                </div>
            <?php } ?>
        <div class="clear"></div>
    </div>
</div>



<script type="text/javascript">
$(document).ready(function(){

    var sendComment = document.getElementsByName("sendComment");
    var repContent = document.getElementsByName("repContent");
    $(sendComment).attr('disabled', true);
    $(repContent).keyup(function () {
        if ($(this).val().length != 0)
            $(sendComment).attr('disabled', false);
        else
            $(sendComment).attr('disabled', true);
    })

});

<script>

【问题讨论】：

重用 id #sendComment 可能是个问题。 id 属性意味着每个页面都是唯一的
谢谢@RyanTuosto。这解决了问题。
@RyanTuosto 我的解决方案是将 name="sendComment" 添加到输入中。然后我使用 document.getElementsByName("sendComment") 来引用名称。像魅力一样工作。上面做的更正。再次感谢。

标签： javascript php jquery treeview parent-child

【解决方案1】：

id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。 https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

如果您愿意，您可以附加父消息 ID，例如 id="sendComment-<?php echo $postId; ?>"，然后使用选择器 $("[id*=sendComment]") 查询 ID 包含“sendComment”的所有元素

【讨论】：