动态禁用按钮在视觉上不会更改

Dynamically disabled button not changing visually?

本文关键字：视觉上 按钮 动态      更新时间：2023-09-26

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

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

to

<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

使用禁用的伪值。 这就是您的浏览器通常更改禁用输入或按钮的外观的方式 :disabled . 根据您的喜好设置样式。无论如何，将其放在您的全局 css 或您正在使用的 css 文件中

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

我认为您应该在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'
        )
    );
相关文章：