JavaScript отключает два входа одним щелчком мыши

У меня сейчас работает, когда вы нажимаете этот флажок, выпадающий (textbox_1) отключается. Мой вопрос, как модифицировать этот код также отключить textbox_2 той же мыши ...JavaScript отключает два входа одним щелчком мыши

<html> 
    <head> 
     <script type="text/javascript"> 
     // setup a bit of code to run after the document has loaded. (note that its set on window) 
     window.addEventListener('load', function(){ 
      potential_checkboxes = document.getElementsByTagName('input'); 
      for(i = 0; i < potential_checkboxes.length; i ++) { 
       element = potential_checkboxes[i]; 
       // see if we have a checkbox 

       if (element.getAttribute('type') == 'checkbox') { 
        // initial setup 
        textbox = document.getElementById(element.getAttribute('rel')); 
        textbox.disabled = element.checked; 

        // add event handler to checkbox 
        element.addEventListener('change', function() { 
         // inside here, this refers to the checkbox that just got changed 
         textbox = document.getElementById(this.getAttribute('rel')); 
         // set disabled property of textbox to not checked property of this checkbox 
         textbox.disabled = this.checked; 
        }, false); 
       }    
      } 
     }, false); 
     </script> 
    </head> 
    <body> 
     <h1>Enable/disable input based on checkbox.</h1> 

     <form> 
      <label for="textbox_1"> 
      <SELECT class="enteredYear" id="textbox_1" name=year> 
      <OPTION selected value="">Year</OPTION> 
      <OPTION value=2013>2014</OPTION> 
      <OPTION value=2013>2013</OPTION> 
      <OPTION value=2012>2012</OPTION> 
      </SELECT> 
      </label> 
      <label for="textbox_2"> 
       Textbox 1: 
       <input id="textbox_2" type="text" value="some value" /> 
      </label> 

      <br /> 
      <input id=="checkbox_1" type="checkbox" rel="textbox_1"/> 
      <label for="checkbox_1">I have a classic car.</label> 
      <hr /> 
     <form> 
    </body> 
</html>

источник

2013-07-30 user1789437

[Причина более, почему вы должны начать использовать ** Jquery **!] (HTTP: // blog.utest.com/why-should-anyone-use-jquery/2011/06/) –

Я согласен, я изучаю, как я иду, это просто то, что мне нужно выяснить в ближайшее время! – user1789437

Проблема, с которой вы сталкиваетесь, заключается в том, что это зависит от свойства 'rel' ввода флажка. Итак, возникает вопрос, насколько вы заботитесь о возможности указать идентификатор цели, который должен быть отключен, указав значение 'rel'? –

element.addEventListener('change', function() { 
    // inside here, this refers to the checkbox that just got changed 
    textbox = document.getElementById(this.getAttribute('rel')); 
    textbox.disabled = this.checked; 
    textbox2 = document.getElementById('textbox_2'); 
    textbox2.disabled = this.checked; 
}, false);

источник

2013-07-30 20:43:28 Ringo

Добавить имя класса CSS к элементам, которые вы хотите отключить и использовать:

var checks = document.getElementsByClassName('disableme')

«проверки» будут затем массивом, содержащим эти элементы. Loop, отключить.

источник

2013-07-30 20:43:44

Просто «захватите» textbox_2, используя document.getElementById('textbox_2'), и отключите его внутри вашего прослушивателя событий изменения для этого флажка.

// add event handler to checkbox 
element.addEventListener('change', function() { 
    // inside here, this refers to the checkbox that just got changed 
    textbox = document.getElementById('textbox_1'); 

    // --------------------------------------------- 
    // Grabs the textbox_2 element 
    textbox2 = document.getElementById('textbox_2'); 
    // --------------------------------------------- 

    // set disabled property of textbox to not checked property of this checkbox 
    textbox.disabled = this.checked; 

    // ------------------ 
    // Disables textbox_2 
    // ------------------ 
    textbox2.disabled = this.checked; 
}, false);

источник

2013-07-30 20:44:00 federicot

Хороший ответ, но я бы посоветовал, что если вы собираетесь жестко закодировать идентификатор textbox_2, вы должны пойти дальше и удалить зависимость от свойства 'rel' checkbox для отключения textbox_1, просто такое поведение будет последовательным. –

Спасибо вам, это работает! – user1789437

@MikeBrant Ты прав, я пропустил это. Я имею тенденцию изменять только то, что пользователь хочет изменить, не касаясь того, что уже сработало для него, но в этом случае оно оправдано ради последовательности. – federicot

Если вы хотите придерживаться подобного подхода, вы могли бы сделать что-то вроде этого:

<input id=="checkbox_1" type="checkbox" rel="textbox_1,textbox_2"/> 

element.addEventListener('change', function() { 
    var ids = this.getAttribute('rel').split(","); 
    for(var i = 0; i < ids.length; i++) { 
     textbox = document.getElementById(ids[i]); 
     // set disabled property of textbox to not checked property of this checkbox 
     textbox.disabled = this.checked; 
    } 
}, false);

источник

2013-07-30 20:50:22 Kamala

JavaScript отключает два входа одним щелчком мыши

ответ

Смежные вопросы