Dynamically grab form ID, выключить все кнопки в исходной форме

Question

Мне удалось динамически получить идентификатор формы, но, похоже, не отключает кнопки, когда один из них щелкнут. Я пытаюсь использовать .prop, чтобы отключить кнопки.

Как люди делают выбор, нажимая на кнопки, я хочу отключить предыдущие варианты.

Код:

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); 
 
};

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

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

Answer 1

Вы можете использовать DOM API для выбора элементов формы и перебирать их, подключая обработчик щелчка по пути. Затем в обработчике кликов вы можете найти все кнопки в форме и отключить те, которые не были нажаты. Это не требует внешних библиотек.

Вам необходимо удалить все атрибуты onclick="" из вашего HTML-кода, так как это напрямую привязывает обработчик события к форме.

(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; 
     } 
    } 
} 

Answer 2

Вам не нужно, чтобы получить родительский идентификатор, просто использовать JQuery DOM обхода:

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

Answer 3

Я не совсем уверен, что если 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>