Заставить пользователя выбирать только один селектор «href» с помощью JQuery

Question

Ive работает над короткой частью кода для создания поиска тегов, но я немного зациклился на чем-то.

($("#interiors_search a").click(function(event) {) 

Что мне нужно делать, и для жизни меня, не могу понять, каким образом, это, на первый столбец, который является тип номера только позволяют пользователю выбрать один выбор.

Как вы можете видеть, нажатие на выбор использует onclick для обновления массива тегов с помощью jQuery, а затем при отправке массив тегов отправляется на страницу результатов.

Таким образом, он должен добавить выделение в массив, а также, если пользователь меняет ум, удалите предыдущий выбранный тег из массива, только разрешая только один выбор.

На данный момент все работы и множественный выбор тегов хороши, но я не хочу полагаться на пользователя, используя свой мозг, чтобы проверить только один тип комнаты, как если бы выбрали два или более типа комнаты, он вернет пустой запрос.

Любая помощь, как всегда высоко ценится.

Вот скрипку к тому, что я до сих пор: https://jsfiddle.net/z1s18dwa/1/

JS

Propertywise = {}; 

Propertywise = { 
    filters: function() { 
    if (jQuery(".interiors_filter").is(":visible")) { 
     jQuery('.interiors_filter').stop().slideUp('fast'); 
    } else { 
     jQuery('.interiors_filter').stop().slideDown(); 
    } 
    }, 
    tags: {} 
} 

$("#interiors_search a").click(function(event) { 
    event.preventDefault(); 
    var tag = $(this).data('value'); 
    $(this).toggleClass("selected"); 

    if (Propertywise.tags[tag]) { 
    delete Propertywise.tags[tag]; 

    } else { 
    Propertywise.tags[tag] = true; 

    } 

}); 

HTML

<div class="interiors"> 
    <div id="content" class="content sub_holder"> 
    <div class="fullbleed"> 
     <ul class="menu" id="interiors_menu"> 
     <li id="interiors_menu_search"> 
      <a href="#" onclick="Propertywise.filters(); return false;">Search</a> 
    </li> 
    <li> 
     <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by room</a> 
    </li> 
    <li> 
     <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by style</a> 
    </li> 
    <li> 
     <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by colour</a> 
    </li> 
    <li> 
     <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by feature</a> 
    </li> 
    </ul> 
    <div class="interiors_filter tags columns_4" style="display: block;"> 
    <form id="interiors_search" name="interiors_search"> 
     <ol class="details"> 
     <li> 
      <h3>Rooms</h3> 
      <p><a data-value="bathroom" href="#">Bathroom</a> 
      <a data-value="bedroom" href="#">Bedroom</a> 
      <a data-value="kitchen" href="#">Kitchen</a> 
      <a data-value="outside-space" href="#">Outside space</a> 
      <a data-value="reception" href="#">Reception</a></p> 
     </li> 
     <li> 
      <h3>Styles</h3> 
      <p><a data-value="contemporary" href="#">Contemporary</a> 
      <a data-value="country" href="#">Country</a> 
      <a data-value="quirky" href="#">Quirky</a> 
      <a data-value="traditional" href="#">Traditional</a></p> 
     </li> 
     <li id="d3"> 
      <h3>Colours</h3> 
      <p><a data-value="black" href="#">Black</a> 
      <a data-value="blue" href="#">Blue</a> 
      <a data-value="brown" href="#">Brown</a> 
      <a data-value="colourful" href="#">Colourful</a> 
      <a data-value="cream" href="#">Cream</a> 
      <a data-value="green" href="#">Green</a> 
      <a data-value="grey" href="#">Grey</a> 
      <a data-value="pink" href="#">Pink</a> 
      <a data-value="red" href="#">Red</a> 
      <a data-value="white" href="#">White</a> 
      <a data-value="yellow" href="#">Yellow</a></p> 
     </li> 
     <li> 
      <h3>Features</h3> 
      <p><a data-value="childrens" href="#">Children's</a> 
       <a data-value="feature-fireplace" href="#">Feature fireplace</a> 
       <a data-value="feature-lighting" href="#">Feature lighting</a> 
       <a data-value="feature-staircase" href="#">Feature staircase</a> 
       <a data-value="great-view" href="#">Great View</a> 
       <a data-value="home-office" href="#">Home Office</a> 
       <a data-value="hotel-chic" href="#">Hotel chic</a> 
       <a data-value="loft-living" href="#">Loft living</a> 
       <a data-value="open-plan" href="#">Open-plan</a> 
       <a data-value="outdoor-living" href="#">Outdoor living</a> 
       <a data-value="small" href="#">Small</a> 
       <a data-value="statement-bath" href="#">Statement bath</a> 
       <a data-value="statement-wallpaper" href="#">Statement wallpaper</a> 
       <a data-value="swimming-pool" href="#">Swimming pool</a></p> 
      </li> 
      </ol> 
      <p class="cta"></p> 
      <input class="submit" style="cursor:pointer;font-size:130%;clear:both;margin:24px auto;float:none;display:block;border:none;text-transform:uppercase;background-color:#fff000;" type="button" value="Search"> 
     </form> 
     </div> 
    </div> 
    </div> 
    </div> 
    </div> 

Answer 1

У меня есть рабочий фрагмент кода здесь, что я написал реальные быстро, есть много способов справиться с этим, но это работает достаточно хорошо.

Я добавил класс к параграфу оберточной метки анкерной для комнаты:

<p class='rooms'> 

Я использую этот класс в случае щелчка, чтобы заставить пользователь только еще один ряд выбран с этим кодом:

if ($(this).closest('p').hasClass('rooms')) { 
     $(this).closest('p').find('a').each(function() { 
      $(this).removeClass('selected'); 
     }); 
    } 

Работа скрипку: https://jsfiddle.net/z1s18dwa/4/

EDIT

Я добавил код для обработки тегов, когда я удаляю «выбранный» класс, я просто удаляю теги.

var roomTag = $(this).data('value'); 
    if (Propertywise.tags[roomTag]) { 
     delete Propertywise.tags[roomTag]; 
    } 

Обновлено скрипка: https://jsfiddle.net/z1s18dwa/13/