2014-10-30 3 views
0

У меня есть таблица внизу с флажками в ней, которые будут сравнивать то, что в каждой строке, максимум до 3 элементов для сравнения.Добавить число в атрибуты флажков и ограничить количество отмеченных флажков

Поэтому я хочу, чтобы jQuery позволял выбирать только три флажка, а затем динамически добавлять число в конец атрибута name.

Так что, если бы было 2 для сравнения, атрибутами имени были бы «horse_1» и «horse_2».

У меня нет понятия, с чего начать!

 <tr> 
      <td><input type="checkbox" value="2560092" name="horse_"></td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" value="2560093" name="horse_"></td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" value="2560094" name="horse_"></td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" value="2560095" name="horse_"></td> 
      <td>4</td> 
     </tr> 
+0

Начните с прослушивания 'change' события. – undefined

+0

Вы хотите ограничить пользовательский интерфейс, чтобы пользователь мог выбрать любые три флажки из доступных флажков. Правильно ..? –

+0

Что происходит, когда они нажимают вперед? Он не проверяется или должен ли он циклировать выбор, отменяя первый элемент? – Snellface

ответ

2

Вы можете получить количество выбранных элементов с помощью:

var selected = $('input:checked') 
selected.length 

Если количество выбранных элементов 3, вы можете отключить все непроверенные входы. Здесь, используя селектор jQuery: not(), вы получите инверсию свойства: checked.

if (selected.length == 3) { 
     $("input:not(:checked)").prop('disabled', true); 
    } 

Затем добавление инструкции else, так что если 3 не выбраны, входы не будут отключены.

else { 
     $("input").prop('disabled', false); 
    } 

Вы можете использовать .each() для итерации по каждому из проверяемых элементов, чтобы обновить свое имя, используя индекс элемента в наборе как число, добавляя 1 к значению, чтобы противостоять нулю индексирование:

$('input:checked').each(function(index, element) { 
     $(element).attr('name', 'horse_' + (index + 1)); 
    }); 

http://jsfiddle.net/bj8L0ct2/1/

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