在选择框选项样式属性上显示隐藏按钮答案

【问题标题】：Show hide button on select box option style attribute在选择框选项样式属性上显示隐藏按钮
【发布时间】：2020-06-27 16:00:36
【问题描述】：

如果选项中有 style="color:#cccccc" 我有我想要的选择框然后禁用按钮显示否则启用按钮显示。

新说明：如果选项中有样式颜色属性，我想为按钮添加禁用属性，否则如果选项中没有样式颜色属性，则按钮保持启用

<select class="selected" >
    <option>Bank 1</option>
    <option style="color:#cccccc">Bank 2</option>
    <option>Bank 3</option>
</select>

<button class="btn_enabled btn">Pay Enabled</button>
<button class="btn_disabled btn" disabled>Pay Disabled</button>

$(function () {
  $(".selected").on("change", function () { 
      "style" === $(this).attr() 
          ? $(".btn_enabled").show() 
          : $(".btn_enabled").hide() 
  });
});

.btn_disabled { display: none; }

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$(function () {
$(".selected").on("change", function () { 
     $(".btn_enabled").show( $('option:selected', this).attr('style') );
});

来源： https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

jQuery - getting custom attribute from selected option

【讨论】：

这是最小的解决方案。

【解决方案2】：

您需要使用$(this).find(":selected").attr('style') 来获取选定的选项样式

 $(".selected").on("change", function () { 
   $(this).find(":selected").attr('style') === 'color:#cccccc' ? $(".btn_enabled").show() : $(".btn_enabled").hide() });
 });

   

$(function () {
$(".selected").on("change", function () { $(this).find(":selected").attr('style') === 'color:#cccccc' ? $(".btn_enabled").show() : $(".btn_enabled").hide() });
    });
    
    //"style" === $(this).attr() ? $(".btn_enabled").show() : $(".btn_enabled").hide()

.btn_disabled {
            display: none;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selected" >
            <option>Bank 1</option>
            <option style="color:#cccccc">Bank 2</option>
            <option>Bank 3</option>
        </select>

        <button class="btn_enabled btn">Pay Enabled</button>
        <button class="btn_disabled btn" disabled>Pay Disabled</button>

【讨论】：

【解决方案3】：

您必须捕获选定的选项。最好使用选择选项作为第一个选项

$(function () {
    $(".selected").on("change", function () { 
    if($(this).find(':selected').attr('style')) {
      $(".btn_enabled").show()
      $(".btn_disabled").hide()
    }
    else {
       $(".btn_disabled").show()
       $(".btn_enabled").hide()
    }
     });
});

.btn {
                display: none;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select class="selected" >
                <option>Select Option </option>
                <option>Bank 1</option>
                <option style="color:#cccccc">Bank 2</option>
                <option>Bank 3</option>
            </select>
    
            <button class="btn_enabled btn">Pay Enabled</button>
            <button class="btn_disabled btn">Pay Disabled</button>

【讨论】：

【解决方案4】：

$(function () {
  $(".selected").on("change", function (e) {  
    $(".selected option:selected").attr("style") === "color:#cccccc" ? $(".btn_enabled").show() : $(".btn_enabled").hide() 
 });
});

.btn_disabled {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selected" >
    <option value="1" >Bank 1</option>
    <option value="2" style="color:#cccccc">Bank 2</option>
    <option value="3" >Bank 3</option>
</select>

<button class="btn_enabled btn">Pay Enabled</button>
<button class="btn_disabled btn" disabled>Pay Disabled</button>

【讨论】：

如果有颜色我想要什么然后按钮添加禁用属性但如果有颜色则不更改默认启用

【解决方案5】：

如果 [其中之一] option 中有 style="color:#cccccc"

你可以这样做：

$(".selected>option[style='color:#cccccc']").length > 0

例如

$(function() {
  $(".selected>option[style='color:#cccccc']").length > 0 
    ? $(".btn_enabled").show() 
    : $(".btn_enabled").hide()
});

如果你的意思是：

如果[选中的]option中有style="color:#cccccc"

那么上面的可以用:selected进行转换

$(this).find(">option:selected[style='color:#cccccc']").length > 0

$(function() {
  $(".selected").on("change", function() {
    $(this).find(">option:selected[style='color:#cccccc']").length > 0 ?
      $(".btn_enabled").show() :
      $(".btn_enabled").hide()
  });
  $(".selected").change();
});

.btn_disabled {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selected">
  <option>Bank 1</option>
  <option style="color:#cccccc">Bank 2</option>
  <option>Bank 3</option>
</select>

<button class="btn_enabled btn">Pay Enabled</button>
<button class="btn_disabled btn" disabled>Pay Disabled</button>

【讨论】：