动态禁用按钮在视觉上没有变化？

Question

所以基本上我们有一个按钮，当点击它时，它的值应该改变并且应该被禁用。我们的按钮来自

<input class="saveButton" name="yt26" type="button" value="save" id="yt26">

到

<input class="saveButton" name="yt26" type="button" value="saved" id="yt26" disabled>

不幸的是，在页面刷新之前，按钮的外观不会发生变化。我们正在使用$(this).attr("disabled","disabled") 更改按钮我们还尝试了$(this).prop("disabled", true) 和$(this).prop("disabled","disabled")，它们似乎都不起作用。如果你熟悉 Yii，下面贴出整个按钮代码：

echo CHtml::ajaxButton(
            'save', 
            Yii::app()->createUrl('dashboard/savelink'),
            array( // ajax options
                'type' => 'POST',
                'context' => "js:this",
                'success' => 'js:function() {$(this).attr("disabled", "disabled"); $(this).val("saved") ;}',
                'data' => array(
                    'commentLink' => $commentLink
                )
            ),
            array(
                'class'=>'saveButton'
            )
        );

提前致谢，
J

Answer 1

使用禁用的伪。这就是您的浏览器通常如何更改禁用输入或按钮:disabled 的外观。根据您的喜好设置样式。还是把它放在你的全局 css 或你正在使用的 css 文件中

input:disabled, button:disabled{
  color:graytext;
  background: buttonface;
  border:1px solid;
}

Answer 2

我认为你应该在 ajax 的 beforeSend 选项中添加$(this).attr("disabled", "disabled")。

echo CHtml::ajaxButton(
        'save', 
        Yii::app()->createUrl('dashboard/savelink'),
        array( // ajax options
            'type' => 'POST',
            'context' => "js:this",
            'beforeSend => js: function(){$(this).attr("disabled", "disabled"); },
            'success' => 'js:function() { $(this).val("saved") ;}',
            'data' => array(
                'commentLink' => $commentLink
            )
        ),
        array(
            'class'=>'saveButton'
        )
    );