Show hide button on select box option style attribute

Question

I have select box what i want if there is style="color:#cccccc" in option then disable button show else enable button show.

New Note : i want to add disable attribute to button if there is style color attribute in option else button keep enable if there is no style color attribute in option

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

Krishan Kumar · Accepted Answer · 2020-06-27 07:45:16Z

2

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

sources: 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

answered Jun 27, 2020 at 7:45

Krishan Kumar

4035 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krishan Kumar Over a year ago

This is the minimal solution.

AKT · Accepted Answer · 2020-06-27 08:00:36Z

You have to capture the selected option. Also better to use a select option as first option

$(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>

Marik Ishtar · Accepted Answer · 2020-06-27 07:43:29Z

1

$(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>

answered Jun 27, 2020 at 7:43

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

1 Comment

Vishal Over a year ago

What i want if there is color then button added disable attribute but if there is color then no change default enable

fdomn-m · Accepted Answer · 2020-06-27 07:43:39Z

if there is style="color:#cccccc" in [one of the] option

You can do this with:

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

eg

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

If you instead meant:

if there is style="color:#cccccc" in [the selected] option

then the above can be converted with the use of :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>

Hien Nguyen · Accepted Answer · 2020-06-27 07:47:51Z

You need use $(this).find(":selected").attr('style') to get selected option style as

 $(".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>

Collectives™ on Stack Overflow

Show hide button on select box option style attribute

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related