Question

我可以看到svg形式的几个按钮。

    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）我想在单击id为'loadfile'的按钮时禁用id为'savefile'的按钮。我编写了代码片段，因为它不起作用。什么价值可能有问题？

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

我的加载按钮是这样的：

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）当我点击id为'deploy'的按钮时，我想再次启用id为'savefile'的按钮。以下代码也不适用于启用属性。我的禁用功能和部署按钮如下所示。我该如何解决这个问题？

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

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

启用按钮功能

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

Answer 1

这是错误的：

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

如何使用相同的按钮方案正确禁用和启用按钮，现在您只需要将其转换为svg

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

使用类

定义两个按钮

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

使用Jquery

2 个答案: