如果禁用了按钮,则更改文本(引导程序)

全景式

使用表格。目前,该按钮处于禁用状态,直到在<select>此示例中选择了一个选项为止

HTML:

<select id="choose-size" class="form-control input-sm">
 <option selected disabled>Select Sizes</option>
 <option>Small</option>
 <option>Medium</option>
 <option>Large</option>
 <option>X Large</option>
</select>

<button id="cart-btn" type="button" class="btn btn-success btn-lg cart-btn" disabled>
ADD TO CART
</button>

jQuery:

$('#choose-size').one('change', function() {
     $('#cart-btn').prop('disabled', false);
});

我将如何更改文本ADD TO CART,以SELECT SIZE当按钮处于禁用状态。选择大小后,文本将变为ADD TO CART

大卫说恢复莫妮卡

我建议:

// binds an event handler to the 'change' event of the '#choose-size' element:
$('#choose-size').change(function(){
    // finds the ':selected' option:
    var opt = $(this).find('option:selected');
    // selects the '#cart-btn' element:
    $('#cart-btn')
    // sets the 'disabled' property of the element to true
    // (if the option is disabled) or false (if the option is *not* disabled):
    .prop('disabled', opt.prop('disabled'))
    // sets the text of the button according to the option being disabled or not:
    .text(function(){
        return opt.prop('disabled') ? 'Select size' : 'Add to cart';
    });
// triggers the 'change' event, to run the event-handler on page-load:
}).change();

JS小提琴演示

参考:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如果在swiftUI中禁用了按钮,如何更改按钮的背景色

来自分类Dev

如果编辑文本更改,如何禁用android中的按钮以响应?

来自分类Dev

如何使用glyphicon引导程序更改按钮文本并保留顺序?

来自分类Dev

更改引导加载按钮文本

来自分类Dev

引导程序更改按钮颜色

来自分类Dev

如果引导程序中输入类型文件为空,则使按钮禁用

来自分类Dev

如果引导程序中输入类型文件为空,则使按钮禁用

来自分类Dev

在引导程序3中禁用单选按钮?

来自分类Dev

引导程序崩溃:更改切换按钮图标和文本的显示

来自分类Dev

(引导程序)-更改下拉按钮文本以反映单击的项目会删除插入符号

来自分类Dev

引导程序按钮颜色未更改

来自分类Dev

从Ajax更改按钮加载引导程序模态

来自分类Dev

按钮启用和禁用文本更改事件

来自分类Dev

如果按钮被禁用,则禁用工具提示文本

来自分类Dev

单击按钮时启用/禁用引导程序弹出窗口

来自分类Dev

引导程序:使用禁用的按钮作为表单输入

来自分类Dev

条件为true时,Rails引导程序和禁用的按钮

来自分类Dev

覆盖引导程序样式,按钮类的禁用状态

来自分类Dev

在禁用的单选按钮引导程序3上显示工具提示

来自分类Dev

ng-transclude内部引导程序禁用按钮

来自分类Dev

根据下拉选择启用和禁用按钮。- 引导程序 3

来自分类Dev

如何通过Objective-C中的引导访问来检测是否禁用了硬件按钮?

来自分类Dev

如何禁用按钮并更改此代码上的按钮文本?

来自分类Dev

如果禁用了文本字段,如何防止从文本字段读取输入

来自分类Dev

Codeigniter:引导程序禁用更改,验证后启用

来自分类Dev

如果禁用了JavaScript,如何禁用网站

来自分类Dev

Jtree:如果文本更改,动作处理程序?

来自分类Dev

如果文本字段为空,如何禁用按钮?

来自分类Dev

如果选择了单选按钮,则禁用文本区域?

Related 相关文章

  1. 1

    如果在swiftUI中禁用了按钮,如何更改按钮的背景色

  2. 2

    如果编辑文本更改,如何禁用android中的按钮以响应?

  3. 3

    如何使用glyphicon引导程序更改按钮文本并保留顺序?

  4. 4

    更改引导加载按钮文本

  5. 5

    引导程序更改按钮颜色

  6. 6

    如果引导程序中输入类型文件为空,则使按钮禁用

  7. 7

    如果引导程序中输入类型文件为空,则使按钮禁用

  8. 8

    在引导程序3中禁用单选按钮?

  9. 9

    引导程序崩溃:更改切换按钮图标和文本的显示

  10. 10

    (引导程序)-更改下拉按钮文本以反映单击的项目会删除插入符号

  11. 11

    引导程序按钮颜色未更改

  12. 12

    从Ajax更改按钮加载引导程序模态

  13. 13

    按钮启用和禁用文本更改事件

  14. 14

    如果按钮被禁用,则禁用工具提示文本

  15. 15

    单击按钮时启用/禁用引导程序弹出窗口

  16. 16

    引导程序:使用禁用的按钮作为表单输入

  17. 17

    条件为true时,Rails引导程序和禁用的按钮

  18. 18

    覆盖引导程序样式,按钮类的禁用状态

  19. 19

    在禁用的单选按钮引导程序3上显示工具提示

  20. 20

    ng-transclude内部引导程序禁用按钮

  21. 21

    根据下拉选择启用和禁用按钮。- 引导程序 3

  22. 22

    如何通过Objective-C中的引导访问来检测是否禁用了硬件按钮?

  23. 23

    如何禁用按钮并更改此代码上的按钮文本?

  24. 24

    如果禁用了文本字段,如何防止从文本字段读取输入

  25. 25

    Codeigniter:引导程序禁用更改,验证后启用

  26. 26

    如果禁用了JavaScript,如何禁用网站

  27. 27

    Jtree:如果文本更改,动作处理程序?

  28. 28

    如果文本字段为空,如何禁用按钮?

  29. 29

    如果选择了单选按钮,则禁用文本区域?

热门标签

归档