CODEWITHSUNDEEP
javascriptjquerysvg
zoint
zoint

Reputation: 108

Disable a button when clicked other button with Jquery

I have couple of buttons in svg form as you can see.

    var g = svg.append('g')
    .attr('class', 'button')
    .attr('id', 'deploy')
    .attr('transform', 'translate(' + [buttonWidth / 4, 100] +')');

var g2 = svg.append('g')
    .attr('class', 'button')
    .attr('id', 'savefile')
    .attr('transform', 'translate(' + [buttonWidth / 4, 150] +')');

var g3 = svg.append('g')
    .attr('class', 'button')
    .attr('id', 'loadfile')
    .attr('transform', 'translate(' + [buttonWidth / 4,  200] + ')');

1) I want to disable the button that has id of 'savefile' when click the button that has id of 'loadfile'. I have written code snippet as following it didn't work. What value could be problematic?

function disableButton(disableVar)
{
    console.log("disable button");
    $(disableVar).prop("disabled", true);
}

My load button is like that:

button()
.container(g3)
.text(text3)
.count(2)
.cb(function() {
        outer.attr("pointer-events", "none");
        loadFlag = true;
        clearFlag = false;
        $(document).ready(function() {
            $("#loadfile").click(function() {
                var disableSaveFile = "#savefile";
                disableButton(disableSaveFile);
            });
        });
        update();
})();

2) I want to enable the button that has id of 'savefile' again when I click the button that has id of 'deploy'. The following code is not working for enabling property as well. My disable function and deploy button shows as below. How can I fix this issue?

button()
.container(g)
.text(text)
.count(0)
.cb(function() {
    outer.attr("pointer-events", "none");

                $('#deploy').click(function () {
                var enableSaveFile = "#savefile";
                    enableButton(enableSaveFile );
                });
            });
        });
})();

Enable button function

function enableButton(enableVar)
{
    console.log("enable button");
    $(enableVar).prop("enabled", true);
}

Upvotes: 0

Views: 1438

Answers (2)

mtizziani
mtizziani

Reputation: 1016

<button class="bothButtons">Click A</button>
<button class="bothButtons">Click B</button>

define both buttons with a class

$('.bothButtons').on('click', function(){
  $('.bothButtons').prop('disabled', true);
  $(this).prop('disabled', false);
});

Upvotes: 0

Marco Salerno
Marco Salerno

Reputation: 5201

This is wrong:

$(enableVar).prop("enabled", true);

That's how to disable and enable a button correctly with same buttons scenario, now you just need to translate it to the svg

$("#first").click(function(){
  $("#second").prop("disabled",true);
});

$("#third").click(function(){
  $("#second").prop("disabled",false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="first">Click me</button>
<button type="button" id="second">Disable me</button>
<button type="button" id="third">All available</button>

Upvotes: 2

Related Questions