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);

在youtube视频播放之前禁用引导按钮

1 个答案: