javascript - 隐藏按钮，直到选中两个名称

Question

我想隐藏一个按钮，直到选中两个具有两个不同名称的特定单选按钮。我只是不确定该怎么做......

HTML

<form>
    <!-- First question -->
    <fieldset>
        <input type="radio" name="trend1" value="Progressing">
        <input type="radio" name="trend1" value="Regressing">
    </fieldset>

    <fieldset>
        <input type="radio" name="q1" value="Good">
        <input type="radio" name="q1" value="Bad">
    </fieldset>

    <button class="next" type="button" name="hideQ1"> 
    <!-- Disable this button until one option on #trend1 and #q1 are checked. -->
    <!-- Not a submit button, if that matters -->

    <!-- Second question -->
    <fieldset>
        <input type="radio" name="trend2" value="Progressing">
        <input type="radio" name="trend2" value="Regressing">
    </fieldset>

    <fieldset>
        <input type="radio" name="q2" value="Good">
        <input type="radio" name="q2" value="Bad">
    </fieldset>

    <button class="next" type="button" name="hideQ2">
    <!-- Disable this button until one option on #trend2 and #q2 are checked. -->
    <!-- Not a submit button, if that matters -->
</form> 

我有点知道如何在整个表单上执行此操作，但是按钮的作用是隐藏当前问题并显示下一个问题，因此最好隐藏按钮直到选中特定名称我去解决它..

非常感谢任何帮助/提示。

编辑:

Hide as in，禁用或隐藏。像那样的东西。

编辑 2:

这就是我尝试过的方法，也许它可以帮助您了解我想要什么。但是它所做的只是完全禁用下一步按钮。

 $(document).ready(function(){
    $('button[name="hideQ1"]').attr('disabled');
    if ($('input[name="q1"]').is(':checked')) && ($('input[name="trend1"]').is(':checked')) {
        $('button[name="hideQ1"]').removeAttr('disabled');
    }
});

Answer 1

也许是这样的。

var trend1  = document.getElementsByName('trend1'),
    q1      = document.getElementsByName('q1'),
    button1 = document.getElementsByName('hideQ1')[0],
    trend2  = document.getElementsByName('trend2'),
    q2      = document.getElementsByName('q2'),
    button2 = document.getElementsByName('hideQ2')[0]

function checked(inputArr) {
  return [].some.call(inputArr, function (input) {
    return input.checked
  })
}

[].forEach.call(document.querySelectorAll('input[type=radio]'), function (input) {
  input.addEventListener('click', function () {
    if (checked(trend1) && checked(q1)) button1.removeAttribute('disabled') 
    if (checked(trend2) && checked(q2)) button2.removeAttribute('disabled') 
  })
})

  <form>
      <!-- First question -->
      <fieldset>
          <input type="radio" name="trend1" value="Progressing">
          <input type="radio" name="trend1" value="Regressing">
      </fieldset>

      <fieldset>
          <input type="radio" name="q1" value="Good">
          <input type="radio" name="q1" value="Bad">
      </fieldset>

  <button class="next" type="button" name="hideQ1" value="next" disabled>Next for q1</button> 
      <!-- Disable this button until one option on #trend1 and #q1 are checked. -->
      <!-- Not a submit button, if that matters -->

      <!-- Second question -->
      <fieldset>
          <input type="radio" name="trend2" value="Progressing">
          <input type="radio" name="trend2" value="Regressing">
      </fieldset>

      <fieldset>
          <input type="radio" name="q2" value="Good">
          <input type="radio" name="q2" value="Bad">
      </fieldset>

  <button class="next" type="button" name="hideQ2" disabled>Next for q2</button>
      <!-- Disable this button until one option on #trend2 and #q2 are checked. -->
      <!-- Not a submit button, if that matters -->
  </form>