Simple if/else click function

Question

I'm trying to add if else statement to below function.

The else statement will contain the following code so that color_update not only will be hidden but at the same time disabled when the button is not clicked.

$("#color_update").prop('disabled', true);

This is the code function:

JS

function open(elem) {
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem[0].dispatchEvent(e);
    } else if (element.fireEvent) {
        elem[0].fireEvent("onmousedown");
    }
}

$(document).ready(function(){

    $('#update').click(function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        $('#color_update').addClass("show").focus();
        open( $('#color_update') ); 
        $("#color").prop('disabled', true);

    });

CSS

#color_update {
display: none;
}

HTML

<select id="color">
      <option value="Red">Red</option>
      <option value="Green">Green</option>
      <option value="Blue">Blue</option>
    </select>

    <input type="button" id="update" value="Update" />

    <select id="color_update">
      <option value="Red">Black</option>
      <option value="Green">Purple</option>
      <option value="Blue">White</option>
    </select>

Please guide me. Thank you.

What do you want? color_update to be disabled initially? and How open function is relevant with the problem? — Satpal
– Satpal, Commented Apr 10, 2017 at 4:12
When does open() get called? currently no where in snippet?? — Zze
– Zze, Commented Apr 10, 2017 at 4:19
I want to add if else statement to the $('#update').click(function(event){ . The color_update is disabled from the start and only enabled when update button is clicked @Satpal — Iman Yasmin
– Iman Yasmin, Commented Apr 10, 2017 at 4:19
@Mint, can you elaborate. Please clearly mention what happens in both the if and else condition — Mayank Raj
– Mayank Raj, Commented Apr 10, 2017 at 4:30
When the update button is clicked, the if condition will disable the color and the else will be disabled the color_update . I understand that the open() function hide and show the color_update . I want the color_update not only be hidden but at the same time disable. @Mayank Raj — Iman Yasmin
– Iman Yasmin, Commented Apr 10, 2017 at 4:41

Mayank Raj · Accepted Answer · 2017-04-10 06:33:59Z

1

From what I could understand, you want to disable/enbable one of the two select elements on the click of the button. Here is the fiddle for the same

Essentially we can use the disabled property of either of the select element as the deciding factor

    $("#color_update").prop('disabled', true); // Disable the select box initially
    $("#color_update").hide(); // Also hide it

    $('#update').click(function() {
      if ($('#color_update').prop('disabled') == true) { // We check the 'disabled' property to determine our next step

        // The button is now disabled, we need to enable it and hide the #color select 
        $("#color_update").prop('disabled', false);
        $("#color").prop('disabled', true);

        // We can now show and hide the respective select elements
        $("#color_update").show();
        $("#color").hide();
      } else { // We can now handle the other case
        $("#color_update").prop('disabled', true);
        $("#color").prop('disabled', false);

        $("#color_update").hide();
        $("#color").show();
      }
    });

Do let me know if you need something else

EDIT: Updated the jsFiddle link

edited Apr 10, 2017 at 6:33

answered Apr 10, 2017 at 4:55

Mayank Raj

1,62412 silver badges13 bronze badges

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

2 Comments

Iman Yasmin Over a year ago

This is exactly what I'm looking for. Thank you @MayankRaj

Mayank Raj Over a year ago

@Mint, happy to help. Keep on hacking :)

Collectives™ on Stack Overflow

Simple if/else click function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related