禁用引导按钮，直到 youtube 视频播放后

Question

这是为一个表单设置的，所以我需要用户在视频结束之前不能点击按钮。

我正在使用 Youtube Video API 播放视频，视频下方有两个按钮，我希望在视频播放完毕之前保持禁用状态。问题是，无论添加属性，甚至通过 jquery 支持来保持它们被禁用。该按钮仍在触发点击事件。

我也尝试将禁用的类添加到锚点，但随后发生的情况是按钮保持禁用状态并且即使在视频完成并且通过代码调用活动类后也无法设置为活动状态。

我的视频播放代码：

<!--YOUTUBE VIDEO SCRIPT-->
    <script src="http://www.youtube.com/player_api"></script>
    <script type="text/javascript">
        // create youtube player
        var player;

        function onYouTubePlayerAPIReady() {
            player = new YT.Player( 'player', {
                height: '315',
                width: '560',
                videoId: 'i1XKt2T8ejc',
                events: {

                    onStateChange: onPlayerStateChange
                }
            } );
        }

        // when video ends
        function onPlayerStateChange( event ) {
            if ( event.data === 0 ) {
                /*Accept and Decline buttons are selectable once video plays entirely*/
                $( 'a.yes' ).attr( 'disabled', false);
                $( 'a.no' ).attr( 'disabled', false);
            }

        }
    </script>

其他代码：

<script type="text/javascript">
 $( 'a.yes' ).attr( 'disabled', true);
 $( 'a.no' ).attr( 'disabled', true);
</script>

按钮：

<a href="exit.php" role="button" class="btn btn-danger no" style="float:right; width:100px;" >Decline</a>

<a href="yes.php" role="button" class="btn btn-success yes"  style="float:right; width:100px;">Accept</a>

Answer 1

您的代码应该可以工作，但是您不能禁用a 元素；将其更改为按钮。

<button href="exit.php" role="button" class="btn btn-danger no" style="float:right; width:100px;" >Decline</abutton>

<button href="yes.php" role="button" class="btn btn-success yes"  style="float:right; width:100px;">Accept</button>

对于 jQuery 来说

$( 'button.yes' ).attr( 'disabled', true);
$( 'button.no' ).attr( 'disabled', true);