Question

我已经成功动态获取了表单ID，但是一旦单击其中一个按钮，就无法关闭按钮。我正在尝试使用.prop来关闭按钮。

当人们通过点击按钮做出选择时，我想禁用之前的选择。

代码：

＆＃13;

function get_parentID(clicked_id) {
  var parent_div = ('#' + clicked_id);
};

function set_path(clicked_id) {
  var divX = ('#' + clicked_id);
  $(divX + '_z').show('slowly');
  //$(divX).prop('disabled', true);
  disable_btn();
}

function disable_btn() {
  $(parent_div + " :input").prop('readonly', true);
};

＆＃13;

.parent {
  border: 2px solid blue;
  margin: 10px;
  padding: 10px;
}
.child {
  border: 2px solid red;
  margin: 10px;
  padding: 10px;
  display: none;
  background-color: yellow;
}

＆＃13;

<div class="parent" id="level_0">Intro Level
  <br></br>
  <form id="level_1_form">
    <input type="button" id="level_1a" value="Choice A" onclick="get_parentID(this.parentNode.id);set_path(this.id);">
    <input type="button" id="level_1b" value="Choice B" onclick="set_path(this.id);get_parentID(this.parentNode.id);">
  </form>

  <br></br>

  <div class="child" id="level_1a_z">This is Level 1 A</br>
    <form id="level_2a_form">
      <input type="button" id="level_2a" value="Choice A-This go nowhere" onclick="get_parentID(this.parentNode.id);set_path(this.id);">
      <input type="button" id="level_1b" value="Choice B-This go nowhere" onclick="set_path(this.id);get_parentID(this.parentNode.id);">
    </form>
  </div>

  <div class="child" id="level_1b_z">This is Level 1 B
    </br>
    <form id="level_2b_form">
      <input type="button" id="level_2a" value="Choice A-This go nowhere" onclick="get_parentID(this.parentNode.id);set_path(this.id);">
      <input type="button" id="level_2b" value="Choice B-This go nowhere" onclick="set_path(this.id);get_parentID(this.parentNode.id);">
    </form>
  </div>

＆＃13;

Answer 1

您不需要获取父ID，只需使用jQuery DOM遍历：

$(":button").click(function() {
    $(this).closest("form").find(":input").not(this).prop('readonly', true);
});

Answer 2

我不确定THIS是否是你想要的，你告诉我！

function toggleContent(button) {
    button += '_z';
    $('.parent > div').each(function() {
        if ($(this).attr('id') == button) {
            $(this).show('slowly');
        }
    });    
}

$(document).on('click', '.parent > form > input', function (e) {
    e = $(this).attr('id');
    $(this).prop('disabled', true);
    toggleContent(e);
});

$('.parent > div').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="level_0">Intro Level
    <br></br>
    <form id="level_1_form">
        <input type="button" id="level_1a" value="Choice A" />
        <input type="button" id="level_1b" value="Choice B" />
    </form>
    <br></br>
    <div class="child" id="level_1a_z">This is Level 1 A
        <form id="level_2a_form">
            <input type="button" id="level_1a_1a" value="Choice A-This go nowhere" />
            <input type="button" id="level_1a_1b" value="Choice B-This go nowhere" />
        </form>
    </div>
    <div class="child" id="level_1b_z">This is Level 1 B
        <br>
        <form id="level_2b_form">
            <input type="button" id="level_1b_1a" value="Choice A-This go nowhere" />
            <input type="button" id="level_1b_1b" value="Choice B-This go nowhere" />
        </form>
    </div>
</div>

Answer 3

您可以使用DOM API来选择表单元素并迭代它们，并在此过程中附加单击处理程序。然后在单击处理程序中，您可以找到表单中的所有按钮，并禁用未单击的任何按钮。这不需要外部库。

您需要从HTML代码中删除所有onclick=""属性，因为这会直接将事件处理程序绑定到表单。

（Demo）

/*    Select the forms and iterate through each form, attaching an event
 *    handler to the click event as you go. You can change the selector 
 *    to be more specific if you have other forms on the page that you 
 *    don't want to be affected
 */ 
var forms = document.querySelectorAll('form'), form, i;
for(i = 0; (form = forms[i]); i++) {
    form.onclick = handleClick;
}

/*    This is the function that handles the click event. First we check 
 *    to make sure the clicked element is a button, then get the parent
 *    element and select all buttons contained within. From there we 
 *    iterate through the buttons and check to make sure the button is
 *    not the clicked element, then disable it if not.
 */
function handleClick(e) {
    if(e.target.type === "button") {
        var parent = e.target.parentNode;
        var buttons = parent.querySelectorAll('input'), button, j;

        for(j = 0; (button = buttons[j]); j++) {
            if(e.target.isSameNode(button)) continue;
            button.disabled = true;
        }
    }
}

动态抓取表单ID，关闭父表单中的所有按钮

3 个答案: