Question

我想创建一个条件，如果用户选择单选按钮A，按钮将是这个。

<input type="button" disabled="disabled" name="next" value="Proceed to Payment" onclick="window.location='shipping.php#openModal'"/>

但是当用户选择单选按钮B时，该按钮将自动为。

<input type="submit" disabled="disabled" name="order" value="Proceed to Checkout"/>

我该怎么做？谢谢

Answer 1

您可以执行以下操作：

为每个按钮分配一个id（稍后可以选择它们，如$（'＃id'））并为它们设置样式规则display: none。由于此规则，当您加载页面时，它们都不可见。

<input id="buttonA" style="display: none" type="button" disabled="disabled" 
       name="next" value="Proceed to Payment" 
       onclick="window.location='shipping.php#openModal'"/>

和

<input id="buttonB" style="display: none" type="submit" disabled="disabled" 
       name="order" value="Proceed to Checkout"/>

然后你可以编写一个jquery处理程序，用于点击你可以执行此操作的主体中的无线电的效果：

function()
{
    if($('#radioButtonAId').checked())
    {
        $('#buttonA').show();
    }

    if($('#radioButtonBId').checked())
    {
        if($('#buttonB').show();
    }
}

Answer 2

将两个按钮放在带有ID
定义CSS类：.invisible {display：none}
将“隐形”类添加到按钮中，该类在启动时不可见
为radiobutton的更改事件创建事件处理程序
在事件处理程序中，通过步骤1中div的所有按钮子项切换“不可见”类（使用其id找到它）

Answer 3

var R1 = document.getElementById('rb1');
var R2 = document.getElementById('rb2');

R1.onchange = function() {
    if(this.checked) {
        document.getElementById('buttonA').style.display = 'block';
        document.getElementById('buttonB').style.display = 'none';
    }
    else
    {
        document.getElementById('buttonA').style.display = 'none';
        document.getElementById('buttonB').style.display = 'block';
    }
}


R2.onchange = function() {
    if(this.checked) {
        document.getElementById('buttonA').style.display = 'none';
        document.getElementById('buttonB').style.display = 'block';
    }
    else
    {
        document.getElementById('buttonA').style.display = 'block';
        document.getElementById('buttonB').style.display = 'none';
    }
}

2个按钮的条件

3 个答案: